jQuery mobile 滑动打开面板
2024-09-02 22:20:41
一、首先在<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="#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="#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:;
margin:;
} 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>
这样子,鼠标往右拉动就会弹出面板我们就完成了。
最新文章
- JavaSE知识结构
- [蓝牙] 4、Heart Rate Service module
- 组内Linq培训记录
- linxu scp命令
- java post请求
- leetcode 8
- js生成唯一值的函数
- 【转】在企业内部分发 iOS 应用程序
- R语言-Knitr包的详细使用说明
- Overview of the Packages JAXP
- CoreLocation MKMapView
- struts2之动态方法调用(转)
- MQTT协议详解一
- eclipse、MyEclipse实现批量改动文件编码
- 多线程junit单元测试
- 关于百度地图js api的getCurrentPosition定位不准确的解决方法
- VB6之HTTP服务器的实现(二)
- (八)控件介绍,QLable
- IO在Socket中的应用
- Perl分片技术