使用jQueryMobile实现滑动翻页效果的方法


Posted in Javascript onFebruary 04, 2015

本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下:

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见

虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇【jQuery手机浏览器中拖拽动作的艰难性分析】中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突。

那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢?

一、基本目标

在手机浏览器中的jQueryMobile框架页中现实滑动手势翻页的功能,如下图:

使用jQueryMobile实现滑动翻页效果的方法

并且记录当前页的页数,随用户滑动而自动增加与减少。

二、制作过程

关于JqueryMobile的界面怎么布置,不再细说,详情请翻阅之前一篇【jQueryMobile之Helloworld与页面切换的方法】

如下的代码注释,主要是叙述如何通过对JqueryMobile封装好的滑动手势jQuery Mobile Swipeleft与jQuery Mobile Swiperight处理,来实现上面的页面,W3C《jQuery Mobile Touch 事件》一文中对此的叙述是有问题的,实验代码与给出的代码并不一致:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>a</title>  

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">  

<!-- 需要的文件不再多嘴 -->  

<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css">  

<script src="jqmobile/jquery-1.11.1.js"></script>  

<script src="jqmobile/jquery.mobile-1.4.5.js"></script>  

  

</head>  

  

<body>  

<!-- 必须此页命名,否则下面的jquerymobile滑动手势控制不到,不起作用 -->  

<div data-role="page" data-position="fixed" data-fullscreen="true" id="mypage">  

  <div data-role="header" data-theme="b" data-tap-toggle = "false">  

    <h1>Title</h1>  

  

  </div>  

<!-- html部分很简单,就在content中布局4个图层,其中div1一开始显示,其余隐藏即好,之所以把“你好”二字设置得大大的,是由于jquerymobile的滑动必须滑到图层内的非空白部分,即使你设置了width:100%; height:100% -->  

  <div data-role="content">  

      <div id="div1">  

        <h1>你好1</h1>  

      </div>  

      <div id="div2" style="display:none;">  

        <h1>你好2</h1>  

      </div>  

      <div id="div3" style="display:none;">  

        <h1>你好3</h1>  

      </div>  

      <div id="div4" style="display:none;">  

        <h1>你好4</h1>  

      </div>  

      <!-- 此乃记录翻到那一页的图层,有一个名叫divnumber的行内文本 -->  

      <div>  

        <span id="divnumber"></span><span>/4</span>  

      </div>  

  </div>  

  

  <div data-role="footer" data-position="fixed" data-fullscreen="true"  data-theme="b" data-tap-toggle = "false">  

      <div data-role="navbar">  

      <ul>  

        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="info">a</a></li>  

        <li><a href="#" target="_self" data-icon="grid">b</a></li>  

        <li><a href="#" target="_self" data-icon="star">c</a></li>  

      </ul>  

    </div>  

      

  </div>   

</div>  
</body>  

</html>  

<script>  

    /* jquery部分,先定义一个记录翻到多少页的变量 */  

    var divnum=1;  

    /* 相当于.innerhtml=""; jquery设置一个节点的值是需要这样设定的 */  

    $("#divnumber").text(divnum)  

    /* 在#mypage页面开启触控 */  

    $(document).on("pageinit","#mypage",function(){  

        /* 如果对div1的非空白部分向左滑,那么div1就隐藏,div2就显示,同时页面计数器+1,并更新divnumber这个行内文本 */  

        $("#div1").on("swipeleft",function(){  

             $("#div1").hide("fast");  

             $("#div2").show("fast");  

             divnum=divnum+1;  

             $("#divnumber").text(divnum)  

        });  

        /* 如果对div2的非空白部分向右滑,那么div1就显示,div2就隐藏,同时页面计数器-1,并更新divnumber这个行内文本 */  

         $("#div2").on("swiperight",function(){  

             $("#div1").show("fast");  

             $("#div2").hide("fast");  

             divnum=divnum-1;  

             $("#divnumber").text(divnum)  

        });  

        /* 如果对div2的非空白部分向左滑,那么div2就隐藏,div3就显示,同时页面计数器+1,并更新divnumber这个行内文本,下面如此类推 */  

        $("#div2").on("swipeleft",function(){  

             $("#div2").hide("fast");  

             $("#div3").show("fast");  

             divnum=divnum+1;  

             $("#divnumber").text(divnum)  

        });  

        $("#div3").on("swiperight",function(){  

             $("#div2").show("fast");  

             $("#div3").hide("fast");  

             divnum=divnum-1;  

             $("#divnumber").text(divnum)  

        });  

        $("#div3").on("swipeleft",function(){  

             $("#div3").hide("fast");  

             $("#div4").show("fast");  

             divnum=divnum+1;  

             $("#divnumber").text(divnum)  

        });  

         $("#div4").on("swiperight",function(){  

             $("#div3").show("fast");  

             $("#div4").hide("fast");  

             divnum=divnum-1;  

             $("#divnumber").text(divnum)  

        });                            

    });  

</script>

请注意,div1没有向右滑的手势,因为这是第一页,div4没有向左滑的手势,因为这是最后一页。

希望本文所述对大家的jQueryMobile程序设计有所帮助。

Javascript 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
Angularjs过滤器使用详解
May 25 Javascript
js实现右键菜单功能
Nov 28 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 #Javascript
Javascript中实现trim()函数的两种方法
Feb 04 #Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 #Javascript
JavaScript检测实例属性, 原型属性
Feb 04 #Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 #Javascript
js对字符的验证方法汇总
Feb 04 #Javascript
AngularJS内置指令
Feb 04 #Javascript
You might like
php数组总结篇(一)
2008/09/30 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
使用php清除bom示例
2014/03/03 PHP
php写的AES加密解密类分享
2014/06/20 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
pytorch permute维度转换方法
2018/12/14 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
初二政治教学反思
2014/01/12 职场文书
企业读书活动总结
2014/06/30 职场文书
后勤工作个人总结
2015/02/28 职场文书
节约用电倡议书
2015/04/28 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
mysql查看表结构的三种方法总结
2022/07/07 MySQL