首页 > 代码库 > jQuery mobile 滑动打开面板
jQuery mobile 滑动打开面板
一、首先在<head></head>里面引入jQuery库、jQuery mobile库以及jQuery mobile样式
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
二、创建一个（左/右侧）面板
<body> <div data-role="page" id="page" style="max-height:440px; min-height:440px;"> <div data-role="header"> </div> <div data-role="content"> <a href="http://www.mamicode.com/#defaultpanel" data-role="button" data-inline="true" data-icon="bars"> 打开面板</a> </div> <div data-role="panel" id="defaultpanel" data-theme="b"> <div class="panel-content"> <h3> 面板</h3> <p> 这里是内容区域</p> <a href="http://www.mamicode.com/#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true"> 关闭面板 </a> </div> </div> </div> </body>
加上CSS样式：
<style> html, body { padding: 0; margin: 0; } html, .ui-mobile, .ui-mobile body { height: 435px; } .ui-mobile, .ui-mobile .ui-page { min-height: 435px; } .ui-content { padding: 10px 15px 0px 15px; } .panel-content { padding: 15px; height: 500px; } #header a { margin-top: 3px; } </style>
这时候点开是这个样子的：
然后我们打开调试，进入到响应式布局（我这里选用的iPhone6s屏幕尺寸）：
这里说明已经创建好一个面板了。
三、设置触屏滑动事件（位置无限制）
<script type="text/javascript"> $("#page").on("swiperight", function() { //我这里的#page是使用最大那个面板的id //向右滑动，显示面板 $("#defaultpanel").panel("open"); //这里的#defaultpanel_right改成自己定义的面板的id
}); </script>
这样子，鼠标往右拉动就会弹出面板我们就完成了。
jQuery mobile 滑动打开面板
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。