一、首先在<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>

这样子,鼠标往右拉动就会弹出面板我们就完成了。

jQuery mobile 滑动打开面板的更多相关文章

  1. jQuery Mobile panel的相关属性

    参考网站:http://www.lampweb.org/jquerymobile/19/64.html 面板 data-role="panel" 在一个 jQuery Mobile ...

  2. jQuery Mobile Slider Widget 使用js控制

    jQuery Mobile 滑动条控件 基本用法不用多说了,看这里: http://www.runoob.com/jquerymobile/jquerymobile-form-sliders.html ...

  3. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 面板

    左滑动面板效果: 右滑动面板效果: @{ ViewBag.Title = "JQuery Mobile Web Page"; } <!DOCTYPE html> < ...

  4. Jquery Mobile左右滑动效果

    首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...

  5. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  6. 小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载四(场景切换)

    作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...

  7. jquery mobile自己定义webapp开发实例(一)——前言篇

    用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享 点击demo演示 手机演示二维码: 此demo已经是比較老的版本号,用户体验流畅度确实还存在非 ...

  8. 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》串行4(场景变化)

    作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...

  9. jQuery Mobile 所有data-*选项,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...

随机推荐

  1. js设计模式之代理模式以及订阅发布模式

    为啥将两种模式放在一起呢?因为这样文章比较长啊. 写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系.知识成为个人的知识,就在于能够用自己的话表达同一种意义. 本文是设计模式系列文 ...

  2. 如何在存储过程中执行set命令  我来答

    1.EXEC使用EXEC命令两种用种执行存储程另种执行态批处理所讲都第二种用 面先使用EXEC演示例,代码1DECLARE @TableName VARCHAR(50),@Sql NVARCHAR ( ...

  3. Qt编码设置

    1.Qt Creator -> 工具 -> 选项 -> 环境 - >概要 -> 语言    Qt Creator本身界面的语言选择,与cpp文件编码无关,与可执行文件显示 ...

  4. 【bzoj1737】[Usaco2005 jan]Naptime 午睡时间 dp

    题目描述 Goneril is a very sleep-deprived cow. Her day is partitioned into N (3 <= N <= 3,830) equ ...

  5. Django 2.0 学习(07):Django 视图(进阶-续)

    接Django 2.0 学习(06):Django 视图(进阶),我们将聚焦在使用简单的表单进行处理和精简代码. 编写简单表单 我们将用下面的代码,来替换之前的detail模板("polls ...

  6. 用select (多路复用)模拟一个 socket server

    需求:用select (多路复用)模拟一个 socket server.可以接收多并发. 1. 一开始是检测自己,如果我有活动了,就说明有客户端要连我了. #用select去模拟socket,实现单线 ...

  7. HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解)

    HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解) 题意分析 要先排序,在做01背包,否则不满足无后效性,为什么呢? 等我理解了再补上. 代码总览 #in ...

  8. NOIP2016Day2T3愤怒的小鸟(状压dp) O(2^n*n^2)再优化

    看这范围都知道是状压吧... 题目大意就不说了嘿嘿嘿 网上流传的写法复杂度大都是O(2^n*n^2),这个复杂度虽然官方数据可以过,但是在洛谷上会TLE[百度搜出来前几个博客的代码交上去都TLE了], ...

  9. 专题训练之2-sat

    推荐几篇博客:https://blog.csdn.net/JarjingX/article/details/8521690 研究总结2-sat问题 https://blog.csdn.net/wher ...

  10. Linux用户、用户组权限管理详解 --- 02

    2,用户.用户组管理操作详解: 2.1 adduser 添加用户: adduser [-u uid][-g group][-d home][-s shell] -u:直接给出userID        ...