一、首先在<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. STL--heap概述:make_heap,sort_heap,pop_heap,push_heap

    heap并不属于STL容器组件,它分为 max heap 和min heap,在缺省情况下,max-heap是优先队列(priority queue)的底层实现机制. 而这个实现机制中的max-hea ...

  2. Android OCR文字识别 实时扫描手机号(极速扫描单行文本方案)

    身份证识别:https://github.com/wenchaosong/OCR_identify 遇到一个需求,要用手机扫描纸质面单,获取面单上的手机号,最后决定用tesseract这个开源OCR库 ...

  3. 【bzoj3754】Tree之最小方差树 最小生成树

    题目描述 给出一张无向图,求它的一棵生成树,使得选出的所有边的方差最小.输出这个最小方差. 输入 第一行两个正整数N,M 接下来M行,每行三个正整数Ui,Vi,Ci N<=100,M<=2 ...

  4. 【bzoj2654】tree 二分+Kruscal

    题目描述 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树.题目保证有解. 输入 第一行V,E,need分别表示点数,边数和需要的白色边数. 接下来E行,每 ...

  5. 【bzoj2435】[NOI2011]道路修建 树形dp

    题目描述 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿意修建恰好 n – 1条双向道路. 每条道路的修 ...

  6. BZOJ4565 HAOI2016字符合并(区间dp+状压dp)

    设f[i][j][k]为将i~j的字符最终合并成k的答案.转移时只考虑最后一个字符是由哪段后缀合成的.如果最后合成为一个字符特殊转移一下. 复杂度看起来是O(n32k),实际常数极小达到O(玄学). ...

  7. 后缀数组SA学习笔记

    什么是后缀数组 后缀数组\(sa[i]\)表示字符串中字典序排名为\(i\)的后缀位置 \(rk[i]\)表示字符串中第\(i\)个后缀的字典序排名 举个例子: ababa a b a b a rk: ...

  8. BZOJ3173:[TJOI2013]最长上升子序列 & HDU3564:Another LIS——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3173 http://acm.hdu.edu.cn/showproblem.php?pid=3564 ...

  9. UVA.136 Ugly Numbers (优先队列)

    UVA.136 Ugly Numbers (优先队列) 题意分析 如果一个数字是2,3,5的倍数,那么他就叫做丑数,规定1也是丑数,现在求解第1500个丑数是多少. 既然某数字2,3,5倍均是丑数,且 ...

  10. css命名冲突解决方法

    css的命名冲突目前有几种解决方法: 1.命名约定 人为的制定一下命名规则以避免冲突,例如前缀,嵌套等 2.CSS in JS 在JavaScript中写CSS,使用工具编译为css,最常见的是sty ...