使用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 相关文章推荐
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
JavaScript Promise 用法
Jun 14 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
JavaScript插件Tab选项卡效果
Nov 14 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
浅析php原型模式
2014/11/25 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python实现图片文件批量重命名
2020/03/23 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
消防安全汇报材料
2014/02/08 职场文书
学生安全教育材料
2014/02/14 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
给校长的建议书
2014/03/12 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
慰问信模板
2015/02/14 职场文书
美元符号 $
2022/02/17 杂记