本文例子请使用手机查看

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

随机推荐

POJ 1698 最大流
Alice's Chance Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7327 Accepted: 2992 De ...
ZooKeeper管理员指南——部署与管理ZooKeeper
1.部署本章节主要讲述如何部署ZooKeeper,包括以下三部分的内容: 系统环境集群模式的配置单机模式的配置系统环境和集群模式配置这两节内容大体讲述了如何部署一个能够用于生产环境的ZK集群. ...
Semaphore信号量
一.前言互斥锁同时只允许一个线程更改数据,而Semaphore是同时允许一定数量的线程更改数据 ,比如厕所有3个坑,那最多只允许3个人上厕所,后面的人只能等里面有人出来了才能再进去. 二.sema ...
大道至简第一章伪代码读后感o(╯□╰)o
import.java.io*; import class duhougan; public static void main(Striing arges[]){ system.out.println ...
浅谈移动端三大viewport
我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...
任务调度 Quartz 学习（三） CronTrigger 表达式
CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表. CronT ...
gdoi2017
今年的gdoi第一天t1大水题一道裸的kmp 但是我把记录长度的int数组开成了char类型正解变爆零心态爆炸......... 后面的第二题两千字题目以及五千字附加故事(我是没有去看,据说全 ...
python学习笔记（七）之列表
列表:是一个加强版的数组,什么东西都可以往里面放. 创建列表创建一个普通列表: >>> member = ['operating system', 'data structure' ...
FileReader 与canvas结合使用显示图片
话不多少,直接上代码 function fileChange() { var file = this.files[0]; var imageType = /^image\//; //是否是图片 if ...
Vue 定义组件模板的七种方式(一般用单文件组件更好)
在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串模板字面量 x-template 内联模板 render 函数 JSF 单文件组件在这篇文章中,我将通过 ...

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