返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

js定义弹出页面

2020-05-11 文章标签: 插件 浏览次数:

我们继续讲解jquery操作事件中,定义弹出页面,菜单和嵌套菜单,借助于插件快速实现点击弹出页面的效果

jquery操作创建元素

1.定义弹出页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>定义弹出页</h1>
    </div>
    <div data-role="content">
    <a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupBasic" data-transition="pop" data-rel="popup">打开弹出页</a>
        <div id="popupBasic" data-role="popup">
            <p>这是一个最简单的弹出框,没有任何设置</p>
        </div>
    </div>
</div>
</body>
</html>

2.菜单和嵌套菜单菜单和嵌套菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>定义弹出菜单</h1>
    </div>
    <div data-role="content">
        <a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a" href="#popupMenu" data-transition="slideup" data-rel="popup">弹出菜单</a>
        <div id="popupMenu" data-role="popup" data-theme="b">
                <ul style="min-width: 210px;" data-role="listview" data-inset="true">
                    <li data-role="list-divider">选择命令</li>
                    <li><a href="#">查看代码</a></li>
                    <li><a href="#">编辑</a></li>
                    <li><a href="#">禁用</a></li>
                    <li><a href="#">删除</a></li>
                </ul>
        </div>
    </div>
</div>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>定义弹出菜单</h1>
    </div>
    <div data-role="content">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" href="#popupNested" data-transition="pop" data-rel="popup">弹出折叠菜单</a>
<div id="popupNested" data-role="popup" data-theme="none">
    <div style="margin: 0px; width: 300px;" data-role="collapsibleset" data-theme="b" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-content-theme="a">
        <div data-role="collapsible" data-inset="false">
        <h2>列表标题1</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">列表内容11</a></li>
                <li><a href="#" data-rel="dialog">列表内容12</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>列表标题2</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">列表内容21</a></li>
                <li><a href="#" data-rel="dialog">列表内容22</a></li>
            </ul>
        </div><!-- /collapsible -->
    </div><!-- /collapsible set -->
</div><!-- /popup -->
    </div>
</div>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。