使用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 相关文章推荐
document节点对象的获取方式示例介绍
Dec 24 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
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
Oracle 常见问题解答
2006/10/09 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
聚美优品恶搞广告词
2014/03/14 职场文书
群众路线党课主持词
2014/04/01 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
新兵入伍心得体会
2014/09/04 职场文书
趣味运动会广播稿
2015/08/19 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书