本文例子请使用手机查看

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>

多层次嵌套列表

<!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>

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

列表分隔符

我们有时候会碰到需要对列表进行分组的功能，具有分组效果的列表可以在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>

列表搜索

当设置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>

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

内嵌列表

<!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"></span></a> </li>

                <li><a href="01.htm">百世经纶一页书<span class="ui-li-count"></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>

列表的性能问题

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，然后就实战一下下。

【初探移动前端开发】jQuery Mobile 二的更多相关文章

【初探移动前端开发05】jQuery Mobile (整合版)
前言为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
【初探移动前端开发03】jQuery Mobile（上）
前言到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
【初探移动前端开发04】jQuery Mobile (中)
前言昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
【初探移动前端开发04】jQuery Mobile 一
网格布局 jquery mobile提供一种多列布局功能,由于移动设备的屏幕大小原因,一般情况还是不要使用多列布局啦. jquery mobile提供一种css样式规则来定义多列布局,对应css为ui ...
【初探移动前端开发05】jQuery Mobile (下)
前言继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...
Web前端开发规范（二）
3.HTML代码规范 .html文件必须存放在项目工程约定的目录中. .html文件的命名:以模块 + 功能的结合方式来命名,比如:newsList.html. 文档类型声明:HTML4中使用< ...
如何结合整洁架构和MVP模式提升前端开发体验（二） - 代码实现篇
上一篇文章介绍了整体架构,接下来说说怎么按照上图的分层结构实现下面的增删改查的功能. 代码结构 vue userManage └── List ├── api.ts ├── EditModal │ ├ ...
前端开发 - jQuery
本节内容一.jQuery概述二.选择器三.操作DOM 四.修改DOM结构五.事件六.动画七.AJAX(待续) 八.扩展(待续) 一.jQuery概述 jQuery 是一个 JavaScri ...
前端开发 - JQuery&Bootstrap - 总结
一.JavaScript和Jquery的区别 1.javascript的缺点: 1.书写繁琐,代码量大 2.代码复杂 3.动画效果,很难实现.使用定时器各种操作和处理 2.定义: 1.Javascr ...

随机推荐

udhcp server端源码分析1--文件组织结构
1:dhcpd.c udhcpd_main函数是整个程序的入口,依次完成的主要工作有读取配置文件信息至全局结构体.记录程序pid number.初始化lease链表.将程序作为daemon运行.死循环 ...
bzoj 4695 最假女选手吉利线段树
最假女选手 Time Limit: 50 Sec Memory Limit: 128 MBSubmit: 480 Solved: 118[Submit][Status][Discuss] Desc ...
HDU 4258 斜率优化dp
Covered Walkway Time Limit: 30000/10000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Othe ...
sgu 131 状压DP
棋盘覆盖(二) 时间限制:1000 ms | 内存限制:65535 KB 描述 The banquet hall of Computer Scientists' Palace has a ...
Git版本管理1-安装配置和同步
原文载于youdaonote,有图片: http://note.youdao.com/share/?id=79a2d4cae937a97785bda7b93cbfc489&type=note ...
【设计模式】模式PK：代理模式VS装饰模式
1.概述对于两个模式,首先要说的是,装饰模式就是代理模式的一个特殊应用,两者的共同点是都具有相同的接口,不同点则是代理模式着重对代理过程的控制,而装饰模式则是对类的功能进行加强或减弱,它着重类的功能 ...
Java反射中method.isBridge() 桥接方法
桥接方法是 JDK 1.5 引入泛型后,为了使Java的泛型方法生成的字节码和 1.5 版本前的字节码相兼容,由编译器自动生成的方法.我们可以通过Method.isBridge()方法来判断一个方法是 ...
【NOIP】提高组2012 国王游戏
[题意] 恰逢H国国庆,国王邀请n位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这n位大臣排成一排,国王站在队伍的最前面.排 ...
webpack 4 ：从0配置到项目搭建
webpack4发布以来,我写项目都是用脚手架,即使再简单的项目,真的是really shame..虽然道听途说了很多 webpack4 的特性,却没有尝试过,因为它给人的感觉就是,em...很难.但 ...
pythonTensorFlow实现yolov3训练自己的目标检测探测自定义数据集
1.数据集准备,使用label标注好自己的数据集. https://github.com/tzutalin/labelImg 打开连接直接下载数据标注工具, 2.具体的大师代码见下链接 https:/ ...

【初探移动前端开发】jQuery Mobile 二