使用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控件的生命周期介绍
Oct 22 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
JS实现水平移动与垂直移动动画
Dec 19 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脚本的10个技巧(6)
2006/10/09 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php unlink()函数使用教程
2018/07/12 PHP
nodejs教程之入门
2014/11/21 NodeJs
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python中Genarator函数用法分析
2015/04/08 Python
python装饰器常见使用方法分析
2019/06/26 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
类和结构的区别
2012/08/15 面试题
市级文明单位申报材料
2014/05/07 职场文书
财务会计专业求职信
2014/06/09 职场文书
经营理念标语
2014/06/21 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
化验员岗位职责
2015/02/14 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript