一、首先在<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. SVM之核函数

    SVM之问题形式化 SVM之对偶问题 >>>SVM之核函数 SVM之解决线性不可分 写在SVM之前——凸优化与对偶问题 上一篇SVM之对偶问题中讨论到,SVM最终形式化为以下优化问题 ...

  2. lucene 学习之编码篇

    本文环境:lucene5.2     JDK1.7   IKAnalyzer 引入lucene相关包 <!-- lucene核心包 --> <dependency> <g ...

  3. BZOJ 1042 硬币购物(背包DP+容斥原理)

    可以看出这是个多重背包,运用单调队列优化可以使每次询问达到O(s).这样总复杂度为O(s*tot). 会TLE. 因为改题的特殊性,每个硬币的币值是不变的,变的只是每次询问的硬币个数. 我们不妨不考虑 ...

  4. 【bzoj3545/bzoj3551】[ONTAK2010]Peaks/加强版 Kruskal+树上倍增+Dfs序+主席树

    bzoj3545 题目描述 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问,每组询 ...

  5. Django 2.0 学习(06)：Django 视图(进阶)

    概述 Django中的特方法,该方法代表了Django的Web页面,并且视图具有特定的模板.以博客应用为例进行说明,在博客应用中应该包含下面的视图: 博客主页:显示最近的一些记录: 详细页面:单个详细 ...

  6. JS详细图解作用域链与闭包

    JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...

  7. [洛谷P3950]部落冲突

    题目大意:给你一棵树,有$3$个操作: $Q\;p\;q:$询问$p,q$是否连通 $C\;p\;q:$把$p->q$这条边割断 $U\;x:$恢复第$x$次操作二 题解:可以在割断时把这条边赋 ...

  8. BZOJ3165 & 洛谷4097：[HEOI2013]Segment——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3165 https://www.luogu.org/problemnew/show/P4097 要求 ...

  9. BZOJ4868：[SHOI2017]期末考试——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=4868 题目复制于洛谷:https://www.luogu.org/problemnew/show/P ...

  10. Redux的State不应该全部放在Store里

    使用了redux管理应用的状态,应用的状态不应该全部放在Store里面. 前端状态主要有一下两种: 1. Domain data 2. UI State 1. Domain data 来自于服务端对领 ...