前言

继续我们移动端的学习，今天到了List相关了。

本文例子请使用手机查看

List列表

在移动设备平台下，由于移动设备屏幕比较小，我们又是用手在上面点击的触屏方式，传统的列表模式在手机上就不太友好了。

虽然HTML5与CSS3提供了强大的界面实现方案，jquery mobile作为jquery框架的一个移动web插件，他根据移动屏幕大小优化了UI组件，

列表组件就是jquery mobile根据移动设备的特性而实现的组件库之一。

我们来一个个看看我们的列表吧

普通链接列表

 <!DOCTYPE html>

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

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 普通链接列表</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g">

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/icriwnze

多层次嵌套列表

 <!DOCTYPE html>

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

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 普通链接列表</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g">

                 <li><a href="01.htm">刀狂剑痴叶小钗</a>

                     <p>

                         子级list</p>

                     <ul>

                         <li><a href="01.htm">清香白莲素还真</a></li>

                         <li><a href="01.htm">清香白莲素还真</a></li>

                     </ul>

                 </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a>

                     <p>

                         子级list</p>

                     <ul>

                         <li><a href="01.htm">清香白莲素还真</a></li>

                         <li><a href="01.htm">清香白莲素还真</a></li>

                     </ul>

                 </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/wc1n0sto

这个嵌套列表，我们点击第一个后便可以看到这个啦。

列表分隔符

我们有时候会碰到需要对列表进行分组的功能，具有分组效果的列表可以在li元素上设置data-role属性为list-divider来实现。

 <!DOCTYPE html>

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

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 列表分割</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g">

                 <li data-role="list-divider">霹雳三巨头</li>

                 <li><a href="01.htm">清香白莲素还真</a> </li>

                 <li><a href="01.htm">百世经纶一页书</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li data-role="list-divider">火影三巨头</li>

                 <li><a href="01.htm">宇智波斑</a> </li>

                 <li><a href="01.htm">初代火影</a> </li>

                 <li><a href="01.htm">六道仙人</a> </li>

                 <li data-role="list-divider">金光三巨头</li>

                 <li><a href="01.htm">史艳文</a> </li>

                 <li><a href="01.htm">藏镜人</a> </li>

                 <li><a href="01.htm">黑白郎君南宫很</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/x34523jv

列表搜索

当设置data-filter为true时便具有了搜索功能了

 <!DOCTYPE html>

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

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 列表分割</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g" data-filter="true">

                 <li><a href="01.htm">清香白莲素还真</a> </li>

                 <li><a href="01.htm">百世经纶一页书</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">宇智波斑</a> </li>

                 <li><a href="01.htm">初代火影</a> </li>

                 <li><a href="01.htm">六道仙人</a> </li>

                 <li><a href="01.htm">史艳文</a> </li>

                 <li><a href="01.htm">藏镜人</a> </li>

                 <li><a href="01.htm">黑白郎君南宫很</a> </li>

                 <li><a href="01.htm">清香白莲素还真</a> </li>

                 <li><a href="01.htm">百世经纶一页书</a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>

                 <li><a href="01.htm">宇智波斑</a> </li>

                 <li><a href="01.htm">初代火影</a> </li>

                 <li><a href="01.htm">六道仙人</a> </li>

                 <li><a href="01.htm">史艳文</a> </li>

                 <li><a href="01.htm">藏镜人</a> </li>

                 <li><a href="01.htm">黑白郎君南宫很</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/f8oxhkfs

这个是界面上的搜索与数据库没关系。

内嵌列表

 <!DOCTYPE html>

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

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <script id="jquerymobile_120" type="text/javascript" class="library"

     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

     <div data-role="page">

         <header data-role="header">

             <h1>

                 列表分割</h1>

         </header>

         <div data-role="content">

             <ul data-role="listview" data-theme="g" data-inset="true">

                 <li><a href="01.htm">清香白莲素还真<span class="ui-li-count">30</span></a> </li>

                 <li><a href="01.htm">百世经纶一页书<span class="ui-li-count">30</span></a> </li>

                 <li><a href="01.htm">刀狂剑痴叶小钗<span class="ui-li-aside">本命</span></a> </li>

             </ul>

             <ol  data-role="listview" data-theme="g" data-inset="true">

                 <li><a href="01.htm">宇智波斑</a> </li>

                 <li><a href="01.htm">初代火影</a> </li>

                 <li><a href="01.htm">六道仙人</a> </li>

             </ol>

             <ul data-role="listview" data-theme="g" data-inset="true">

                 <li><a href="01.htm">史艳文</a> </li>

                 <li><a href="01.htm">藏镜人</a> </li>

                 <li><a href="01.htm">黑白郎君南宫很</a> </li>

             </ul>

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/lpjnjowv

列表的性能问题

jquery mobile虽然提供了非常丰富的列表类型，但大部分类型都是针对不同需求而实现的内容格式列表。

实际上，jquery mobile并没有实现列表的分页功能，当数据量非常大时需要有分页功能，在前面说过，jquery mobile提供一种可搜索过滤列表类型的列表。

前面我们就说了没有通过数据库检索，可能出现数据量非常大的情况，对性能，对流量都不好，检索时候可能出现假死的情况。

所以使用list功能需要慎重。

Event事件

好了，基本UI方面的我们就看完了，现在我们来看看事件方面的东西。

jquery mobile提供了丰富的事件处理机制，并且根据不同的移动设备，整合各种事件，使得开发者不必解决不同设备之间的事件处理差异。

页面加载事件

我们在页面中会使用

$(document).ready()

它的作用是当加载完成一个web页面的Dom结构后就运行该方法。

在移动web应用程序时，仍然可以使用这个功能，但是jquery mobile的机制是每个视图和页面的内容都是使用ajax请求加载的，这样每次显示一个新视图或者新页面都没办法调用readey方法，这不是我们想要的结果。

所以针对jquery mobile提供了这个方法解决这个问题：pageCreate事件，该事件的含义是当视图或页面被切换时触发的。

 $('#page').live('pagecreate', function (e) {

     alert('触发之');

 });

touch事件

jquery mobile提供了最基本的触摸事件：touch事件

tap：

快速触摸屏幕并离开，类似于一次完整的点击事件

taphold：

触摸屏幕并保持一段时间

swipe：

在1秒内水平移动30px屏幕像素以上时触发

swipeleft：

向左侧滑动

swiperight：

向右侧滑动

方向改变事件

orientationchange事件函数当移动设备方向发生改变时触发。

在事件回调函数内的第二个参数返回一个用于识别当前方向的参数，该参数只会返回两种值：portrait（纵向）和landscape（横向）

但是该事件不是所有浏览器都支持，所以使用要慎重。

滚动事件

目前jquery mobile支持两种滚动事件

scrollstart

开始滚动时触发，需要注意是ios上该事件不稳定，原因是ios在滚动时会禁止dom操作

会将dom操作放入队列中，待滚动结束后才执行这些操作，但是估计现在解决了。

scrollend

在滚动结束时触发

显示/隐藏事件

在基于jquery mobile的移动web应用中，我们知道一个web页面存在多个不同的视图或页面，但每次只会显示一个。

当显示其中一个视图时其余都会隐藏，每次视图切换都会触发显示/隐藏事件

pagebeforeshow

当视图通过动画效果开始显示在屏幕之前触发事件

pagebeforehide

当视图通过动画效果开始隐藏之前触发事件

pageshow

当视图通过动画效果显示在屏幕之后触发事件

pagehide

当视图通过动画效果隐藏后触发事件

没切换一次页面，4钟事件都会被触发，例如：

当a视图切换到b视图时，首先触发a视图的pagebeforeshow事件和b视图的pagebeforehide事件

当b视图完成切换动画效果后完整的显示在屏幕中时，会触发a视图的pagehide事件和b视图的pageshow事件

虚拟鼠标事件

jquery mobile提供了一种虚拟点击事件来整合不同设备中mouse和touch事件

vmouseover

统一处理触摸和鼠标悬停事件

vmousedown

统一处理触摸和鼠标按下事件

vmousemove

处理触摸和鼠标移动事件

vmouseup

处理触摸和鼠标松开事件

vclick

处理触摸和鼠标点击事件

vmousecancel

处理触摸和鼠标离开事件

结语

我们队jquery mobile的学习暂时到这里，接下来我们在学习下phonegap，然后就实战一下下。

【初探移动前端开发05】jQuery Mobile (下)的更多相关文章

【初探移动前端开发】jQuery Mobile 二
本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了. 虽然HTML5与CSS3提供了强大的界面实现方案 ...
【初探移动前端开发05】jQuery Mobile (整合版)
前言为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记二〇一九年二月十三日星期三2时28分54秒前提:本书适合有初步HTML.CSS.JavaScri ...
Jquery Mobile下设置radio控件选中
问题: .html文件头部引入了: <script src="js/jquery.js"></script> <script src="js ...
【初探移动前端开发04】jQuery Mobile (中)
前言昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
【初探移动前端开发03】jQuery Mobile（上）
前言到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
【初探移动前端开发04】jQuery Mobile 一
网格布局 jquery mobile提供一种多列布局功能,由于移动设备的屏幕大小原因,一般情况还是不要使用多列布局啦. jquery mobile提供一种css样式规则来定义多列布局,对应css为ui ...
在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境
移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dreamweaver5.5+PhoneGap+Jquery Mobile搭建移动开发环境,轻轻松松开发你自己的应用.让你用普 ...
史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发
书是人类进步的阶梯. ——高尔基习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...

随机推荐

总结整理 -- python系列
python系列 python--基础学习(一)开发环境搭建,体验HelloWorld python--基础学习(二)判断 .循环.定义函数.继承.调用 python--基础学习(三)字符串单引号.双 ...
（转）rlwrap真是一个好东西
在Linux下面使用sqlplus很不爽,上下键,退格键都不能用,严重降低生产效率. 某一天终于发现了这个rlwrap这个好东西,特写此文记录. 下载地址如下: http://utopia.knowa ...
Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
C#中string.format的格式和用法
String.Format 方法的几种定义: String.Format (String, Object) 将指定的 String 中的格式项替换为指定的 Object 实例的值的文本等效项. Str ...
”Connection reset by peer“引发的思考
闲来无事,把之前写的一个游戏服务器框架(<一个java页游服务器框架>),部署到阿里云服务器上,测试运行了下,结果看到后台log中打印出了“Connection reset by peer ...
【数据压缩】Huffman编码
1. 压缩编码概述数据压缩在日常生活极为常见,平常所用到jpg.mp3均采用数据压缩(采用Huffman编码)以减少占用空间.编码\(C\)是指从字符空间\(A\)到码字表\(X\)的映射.数据压缩 ...
HT for Web列表和3D拓扑组件的拖拽应用
很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表中拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果. 首先 ...
OpenJudge 2990:符号三角形解析报告
2990:符号三角形总时间限制: 1000ms 内存限制: 65536kB 描述符号三角形的第1行有n个由“+”和”-“组成的符号 ,以后每行符号比上行少1个,2个同号下面是”+“ ...
图论 ---- spfa + 链式向前星 ---- poj 3268 : Silver Cow Party
Silver Cow Party Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 12674 Accepted: 5651 ...
【转】 Newtonsoft.Json高级用法
手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

【初探移动前端开发05】jQuery Mobile (下)

前言