【初探移動前端開發】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，而後就實戰一下下。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程