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

时间 2019-11-19

标签初探移动前端开发 jquery mobile 栏目 JQuery 繁體版

原文原文链接

本文例子请使用手机查看javascript

List列表

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

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

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

咱们来一个个看看咱们的列表吧jquery

普通连接列表

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

这个嵌套列表，咱们点击第一个后即可以看到这个啦。ios

列表分隔符

咱们有时候会碰到须要对列表进行分组的功能，具备分组效果的列表能够在li元素上设置data-role属性为list-divider来实现。web

<!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时便具备了搜索功能了ajax

<!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">30</span></a> </li>
                <li><a href="01.htm">百世经纶一页书<span class="ui-li-count">30</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，而后就实战一下下。