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

简介:
前言

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

本文例子请使用手机查看

List列表

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

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

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

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

普通链接列表

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14     <div data-role="page">
15         <header data-role="header">
16             <h1>
17                 普通链接列表</h1>
18         </header>
19         <div data-role="content">
20             <ul data-role="listview" data-theme="g">
21                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
22                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
23                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
24                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
25                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
26             </ul>
27         </div>
28     </div>
29 </body>
30 </html>
复制代码
http://sandbox.runjs.cn/show/icriwnze



多层次嵌套列表

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14     <div data-role="page">
15         <header data-role="header">
16             <h1>
17                 普通链接列表</h1>
18         </header>
19         <div data-role="content">
20             <ul data-role="listview" data-theme="g">
21                 <li><a href="01.htm">刀狂剑痴叶小钗</a>
22                     <p>
23                         子级list</p>
24                     <ul>
25                         <li><a href="01.htm">清香白莲素还真</a></li>
26                         <li><a href="01.htm">清香白莲素还真</a></li>
27                     </ul>
28                 </li>
29                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
30                 <li><a href="01.htm">刀狂剑痴叶小钗</a>
31                     <p>
32                         子级list</p>
33                     <ul>
34                         <li><a href="01.htm">清香白莲素还真</a></li>
35                         <li><a href="01.htm">清香白莲素还真</a></li>
36                     </ul>
37                 </li>
38                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
39                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
40             </ul>
41         </div>
42     </div>
43 </body>
44 </html>
复制代码
http://sandbox.runjs.cn/show/wc1n0sto



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

列表分隔符

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

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14     <div data-role="page">
15         <header data-role="header">
16             <h1>
17                 列表分割</h1>
18         </header>
19         <div data-role="content">
20             <ul data-role="listview" data-theme="g">
21                 <li data-role="list-divider">霹雳三巨头</li>
22                 <li><a href="01.htm">清香白莲素还真</a> </li>
23                 <li><a href="01.htm">百世经纶一页书</a> </li>
24                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
25                 <li data-role="list-divider">火影三巨头</li>
26                 <li><a href="01.htm">宇智波斑</a> </li>
27                 <li><a href="01.htm">初代火影</a> </li>
28                 <li><a href="01.htm">六道仙人</a> </li>
29                 <li data-role="list-divider">金光三巨头</li>
30                 <li><a href="01.htm">史艳文</a> </li>
31                 <li><a href="01.htm">藏镜人</a> </li>
32                 <li><a href="01.htm">黑白郎君南宫很</a> </li>
33             </ul>
34         </div>
35     </div>
36 </body>
37 </html>
复制代码
http://sandbox.runjs.cn/show/x34523jv



列表搜索

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

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14     <div data-role="page">
15         <header data-role="header">
16             <h1>
17                 列表分割</h1>
18         </header>
19         <div data-role="content">
20             <ul data-role="listview" data-theme="g" data-filter="true">
21                 <li><a href="01.htm">清香白莲素还真</a> </li>
22                 <li><a href="01.htm">百世经纶一页书</a> </li>
23                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
24                 <li><a href="01.htm">宇智波斑</a> </li>
25                 <li><a href="01.htm">初代火影</a> </li>
26                 <li><a href="01.htm">六道仙人</a> </li>
27                 <li><a href="01.htm">史艳文</a> </li>
28                 <li><a href="01.htm">藏镜人</a> </li>
29                 <li><a href="01.htm">黑白郎君南宫很</a> </li>
30                 <li><a href="01.htm">清香白莲素还真</a> </li>
31                 <li><a href="01.htm">百世经纶一页书</a> </li>
32                 <li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
33                 <li><a href="01.htm">宇智波斑</a> </li>
34                 <li><a href="01.htm">初代火影</a> </li>
35                 <li><a href="01.htm">六道仙人</a> </li>
36                 <li><a href="01.htm">史艳文</a> </li>
37                 <li><a href="01.htm">藏镜人</a> </li>
38                 <li><a href="01.htm">黑白郎君南宫很</a> </li>
39             </ul>
40         </div>
41     </div>
42 </body>
43 </html>
复制代码
http://sandbox.runjs.cn/show/f8oxhkfs



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

内嵌列表

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14     <div data-role="page">
15         <header data-role="header">
16             <h1>
17                 列表分割</h1>
18         </header>
19         <div data-role="content">
20             <ul data-role="listview" data-theme="g" data-inset="true">
21                 <li><a href="01.htm">清香白莲素还真<span class="ui-li-count">30</span></a> </li>
22                 <li><a href="01.htm">百世经纶一页书<span class="ui-li-count">30</span></a> </li>
23                 <li><a href="01.htm">刀狂剑痴叶小钗<span class="ui-li-aside">本命</span></a> </li>
24             </ul>
25             <ol  data-role="listview" data-theme="g" data-inset="true">
26                 <li><a href="01.htm">宇智波斑</a> </li>
27                 <li><a href="01.htm">初代火影</a> </li>
28                 <li><a href="01.htm">六道仙人</a> </li>
29             </ol>
30             <ul data-role="listview" data-theme="g" data-inset="true">
31                 <li><a href="01.htm">史艳文</a> </li>
32                 <li><a href="01.htm">藏镜人</a> </li>
33                 <li><a href="01.htm">黑白郎君南宫很</a> </li>
34             </ul>
35         </div>
36     </div>
37 </body>
38 </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事件,该事件的含义是当视图或页面被切换时触发的。

1 $('#page').live('pagecreate', function (e) {
2     alert('触发之');
3 });
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,然后就实战一下下。



本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/p/3189413.html如需转载请自行联系原作者

相关文章
|
12天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
11天前
|
移动开发 前端开发 JavaScript
前端高效开发JavaScript库!
前端高效开发JavaScript库!
|
3天前
|
前端开发 网络架构
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
|
6天前
|
缓存 前端开发 JavaScript
微前端框架开发实践的体验报告
微前端架构作为一种解决方案,通过将应用拆分成更小、更易于管理的子应用来提高开发效率和应用性能。本文将分享我在开发微前端框架过程中遇到的问题、解决思路以及具体方案。通过本次微前端框架的开发实践,我们成功实现了应用的解耦和性能的提升。关键点包括跨域问题的解决、路由分发的实现、沙箱和样式隔离的技术应用、通信机制的构建以及性能优化策略的采用。我们的成果是建立了一个高效、可扩展、易于维护的微前端架构。同时,我们也认识到了微前端架构的复杂性,以及在实施过程中需要考虑的诸多细节问题。
47 0
|
7天前
|
存储 人工智能 前端开发
从前端到后端,探索Web开发的奥秘
Web开发是当今最热门的技术领域之一,涉及前端、后端、数据库等多个方面。本文将介绍Web开发的基本架构和技术要点,并深入探讨前后端交互、安全性等问题,帮助读者更好地理解Web开发的奥秘。
|
10天前
|
JavaScript 前端开发 算法
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
|
10天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
12天前
|
Web App开发 前端开发 JavaScript
什么是 Web 应用开发领域的 Frontend Fragmentation(前端碎片化)现象
什么是 Web 应用开发领域的 Frontend Fragmentation(前端碎片化)现象
17 0
|
12天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
12天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?