本文例子请使用手机查看

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

随机推荐

session 超时设置
Java Web开发Session超时设置博客分类: Java Web 在Java Web开发中,Session为我们提供了很多方便,Session是由浏览器和服务器之间维护的.Session超时理 ...
[cerc2012][Gym100624D]20181013
题意:一个序列,如果存在一个连续子序列,满足该子序列中没有只存在一次的序列,则原序列为boring,否则non-boring 题解: 分治递归对一个序列,如果找到了一个只出现一次的数位于a[x],则 ...
UOJ#110. 【APIO2015】Bali Sculptures
印尼巴厘岛的公路上有许多的雕塑,我们来关注它的一条主干道. 在这条主干道上一共有 NN 座雕塑,为方便起见,我们把这些雕塑从 11 到 NN 连续地进行标号,其中第 ii 座雕塑的年龄是 YiYi 年 ...
将文件内容导入到MySQL中
1.作用把文件系统的内容导入到数据库中 2.语法 load data infile "文件名" into table 表名 fields terminated by " ...
div圆角
div{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
bzoj 1927 网络流
首先我们可以知道这道题中每个点只能经过一次,那么我们引入附加源汇source,sink,那么我们可以将每个点拆成两个点,分别表示对于图中这个节点我们的进和出,那么我们可以连接(source,i,1,0 ...
velocity & freemarker
一.Velocity Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅使用简单的模板语言(template language)来引用由java代码定义的 ...
js常用模板引擎
baiduTemplate(百度).artTemplate(腾讯).juicer(淘宝).xtemplate.doT.Jade 1.Handlebars 是 JavaScript 一个语义模板库,通过 ...
canvas_基于canvan绘制的双半圆环进度条
效果图实现原理: 1.使用canvas绘制两个半圆弧,底图灰色半圆弧和颜色进度圆弧. 2.利用setInterval计时器,逐步改变颜色进度条,达到进度条的效果. 效果代码: <!DOCTYP ...
hdu 3371（prim算法）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3371 Connect the Cities Time Limit: 2000/1000 MS (Jav ...

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