使用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实现DIV的一些简单控制
Jun 04 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
BootStrap前端框架使用方法详解
Feb 26 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
服务器web工具 php环境下
2010/12/29 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
详细解读Python中的__init__()方法
2015/05/02 Python
Django的session中对于用户验证的支持
2015/07/23 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python实现学校管理系统
2018/01/11 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
旷课检讨书2000字
2014/01/14 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers