本文例子请使用手机查看

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

随机推荐

HDU1531 差分约束
King Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
git--------------bug修复流程
当前所有分支: master:主分支 test:测试分支 zs:开发人员分支 ls:开发人员分支场景:zs正在开发A模块功能,线上环境产生了一个bug. zs的操作流程(当前分支为zs分支): 1. ...
X210（s5pv210）中断系统
1.SoC对中断的实现机制:异常向量表 (1)异常向量表是CPU中某些特定地址的特定定义.当中断发生的时候,中断要想办法通知CPU去处理中断,怎么做到?这就要靠异常向量表.(2)在CPU设计时,就事先 ...
[freemarker篇]02.生成HTML的静态页面
昨天完成了一部分的今天在上次的基础上,完成完成生成HTML静态页面的操作,中间会涉及一点标签的简单使用.今天的代码有一丢丢的对付的感觉!抱歉了,直接就上代码吧!求原谅! 项目结构目录如下: 第一步,新 ...
原生js实现单屏滚动
类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100 ...
java修饰符——transient
一.背景上星期去CRM上开发一个功能,该系统里面有自动分页,需要在实体类里加入一个分页变量 // 分页 private PageInfo pageInfo = new PageInfo(); 这个本 ...
函数式编程--响应式编程 ---android应用例子
RxJava implements this operator as create. It is good practice to check the observer’s isUnsubscribe ...
google protobuf序列化原理解析（PHP示例）
一.简介 Protocol Buffers是谷歌定义的一种跨语言.跨平台.可扩展的数据传输及存储的协议,因为将字段协议分别放在传输两端,传输数据中只包含数据本身,不需要包含字段说明,所以传输数据量小, ...
Spring注解@Resource和@Autowired区别对比、spring扫描的默认bean的Id、程序获取spring容器对象
-------------------------注解扫面的bean的ID问题-------------------------- 0.前提需要明白注解扫描出来的bean的id默认是类名首字母小写,当 ...
bing查询旁站脚本
#!/usr/bin/env python # -*- coding: UTF-8 -*- #by i3ekr import re,optparse,sys,requests,time,os pars ...

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