使用jquery mobile不可忽視的細節

jQuery Mobile 是創建移動WEB應用程序的框架。在學習和使用該框架的過程中,有一些心得想要和大家分享一下。

一、框架

因為是移動端開發,所以不要忘了下面這個重要的meta標簽哦:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />

使用jquery mobile要引入相應的css文件:

<link rel="stylesheet" >

jquery mobile依賴jquery,因此要先引入jquey.js再引入jquery.mobile.js:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

在引用jquey.js文件的時候一定要注意版本,要在1.8以上,但也不能過高,3.0以下就可以了。##jquey.js文件版本要在1.8以上,3.0以下就可以。
落落一開始就引用了cdnj上的最高版本3.3.1,結果頁面不能正常顯示,出現了下圖這樣的異常情況:


jquery版本過高.png

當落落把jquery.js版本換成1.8.3的,頁面就正常顯示了。


頁面正常顯示.png

二、基本頁面結構

h5 data-*屬性用于通過jquery mobile為移動設備創建交互外觀。

<div data-role="page">
    <div data-role="header">
        <h1>標題</h1>
    </div>
    <div role="main" class="ui-content">
        <p>內容</p>
    </div>
    <div data-role="footer">
        <p>頁腳</p>
    </div>
</div>

jqm中,可以在單一HTML文件中創建多個頁面。
需要通過唯一的id來分隔每個頁面,并使用href屬性連接彼此。
例:

<div data-role="page" id="index">
        <div data-role="header">
            <h1>標題1</h1>
        </div>
        <div data-role="content">
            <p>內容1</p>
            <p><a href="#index2">index2</a></p>
        </div>
        <div data-role="footer">
            <p>頁腳1</p>
        </div>
    </div>
    <div data-role="page" id="index2">
        <div data-role="header">
            <h1>標題2</h1>
        </div>
        <div role="main" class="ui-content">
            <p>內容2</p>
            <p><a href="#index">index</a></p>
        </div>
        <div data-role="footer">
            <p>頁腳2</p>
        </div>
    </div>

關于頁面內容部分,落落看到有兩種寫法:
寫法一

<div data-role="content">
    <p>內容1</p>
    <p><a href="#index2">index2</a></p>
</div>

寫法二

<div role="main" class="ui-content">
    <p>內容2</p>
    <p><a href="#index">index</a></p>
</div>

落落把兩種寫法都用了,發現視覺效果是一致的,在chrome瀏覽器上,第一種寫法解析后如下:

<div data-role="content" class="ui-content" role="main">
    <p>內容1</p>
    <p><a href="#index2" class="ui-link">index2</a></p>
</div>

第二種寫法解析后如下:

<div role="main" class="ui-content">
    <p>內容2</p>
    <p><a href="#index">index</a></p>
</div>

兩種寫法解析后,第二種寫法少了data-role屬性,其它則一致,展示的效果也一致。
落落查看了一下w3c文檔,文檔上使用的是第一種寫法。

對于頁面的頁眉和頁腳,一般都是固定的,不會隨著頁面的滾動而滾動。想要達成這樣的效果在jqm里也很簡單,只需要添加屬性data-position="fixed"
例:

<div data-role="header" data-position="fixed">
    <h1>標題1</h1>
</div>

關于如何從一個頁面過渡到另一個頁面,jqm有一系列效果,這些過渡效果可以用于任意連接,通過data-transition屬性達成。例如data-transition="slide"。默認效果是淡入淡出,若data-transition屬性值設置為none則沒有效果。如果你想應用某個效果,那你需要做的就僅僅是設置相應的data-transition屬性值。

三、頁面事件

$(document).on("事件名稱","#鏈接的id屬性值",function(){})

w3c jQuery Mobile 事件參考手冊詳細列出了所有的 jQuery Mobile 事件,網址如下:
http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_events.asp
請注意,要通過使用 on()方法來綁定事件哦。
關于事件pageinitpageshow,一定要注意它們的區別哦。
pageinit:頁面初始化之后,只執行一次。
pageshow:頁面顯示的時候,每次進入頁面都會執行。

四、組件

1.按鈕
通過給abuttoninput元素添加類class="ui-btn"或者增加data-role="button"可以創建按鈕。
例如:

<a class="ui-btn">我是按鈕</a>

jqm對input元素進行了優化,比如下面的代碼,沒有添加class="ui-btn"或者增加data-role="button",但是它呈現的仍是按鈕的樣式,而且多了陰影、圓角等效果:

<input type="submit" value="我是按鈕">

關于按鈕還有以下樣式:
ui-corner-all圓角
ui-shadow 陰影
ui-btn-inline并排顯示
ui-btn-a
ui-btn-b
這些樣式都要在使用了類ui-btn的基礎上使用。關于后兩種樣式,分別使用在兩個按鈕上,兩個按鈕會呈現不同的效果,第一個按鈕默認背景色白色,第二個按鈕默認背景色黑色。如:

<a class="ui-btn ui-btn-a">按鈕1</a>
<a class="ui-btn ui-btn-b">按鈕2</a>

效果如下:

兩個按鈕呈現不同效果.png

對于按鈕的樣式,除了通過添加以上類名來完成,還可以通過data-*的方式達成:
data-inline=true"兩個或多個按鈕并排顯示
data-corners true | false規定按鈕是否有圓角。
data-mini true | false規定是否是小型按鈕
data-shadow true | false 規定按鈕是否有陰影。
如需創建后退按鈕,使用data-rel="back"屬性(會忽略錨的 href 值)

<a href="#" data-role="button" data-rel="back">返回</a>

還可以對按鈕進行組合:
data-role="controlgroup" 屬性與data-type="horizontal|vertical"一同使用,以規定水平或垂直地組合按鈕。

<div data-role="controlgroup" data-type="horizontal">
    <a href="" data-role="button">按鈕 1</a>
    <a href="" data-role="button">按鈕 2</a>
        <a href="" data-role="button">按鈕 3</a>
</div>

默認情況下,組合按鈕是垂直分組的,彼此間沒有外邊距和空白。并且只有第一個和最后一個按鈕擁有圓角,在組合后就創造出了漂亮的外觀。


按鈕組合.png

注:w3c建議使用 data-role="button"<a> 元素來創建頁面之間的鏈接,而 <input><button>元素用于表單提交。

2、導航欄
導航欄由一組水平排列的鏈接構成,通常位于頁眉或者頁腳內部。
導航欄中的鏈接會自動轉換為按鈕。
使用data-role="navbar"屬性定義導航欄即可。

<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li>
                <a href="">按鈕1</a>
            </li>
            <li>
                <a href="">按鈕2</a>
            </li>
            <li>
                <a href="">按鈕3</a>
            </li>
        </ul>
    </div>
</div>

導航欄按鈕在5個以內(包含5個)時會水平排列在一行內顯示,按鈕平分設備寬度;
導航欄按鈕在5個以上則會換行顯示。建議最多5個按鈕。
通過data-icon屬性可以為導航欄的按鈕添加圖標。

3、列表
jqm中的列表視圖是標準的html列表(有序列表ol和無序列表ul).
想要創建列表,需要在olul元素上添加data-role="listview";要想使這些列表項目可以點擊,要在每個列表項li中規定鏈接。

<ul data-role="listview" data-inset="true">
    <li><a href="">項目1</a></li>
    <li><a href="">項目2</a></li>
    <li><a href="">項目3</a></li>
    <li><a href="">項目4</a></li>
    <li><a href="">項目5</a></li>
</ul>
列表不貼邊顯示.png

如果列表項沒有a鏈接,那么列表項就沒有右邊的箭頭。
data-inset="true"表示列表不要貼邊顯示,為列表添加圓角和外邊距;列表默認是貼邊顯示的。
默認地,列表中的列表項會自動轉換為按鈕(無需 data-role="button")。

下面的這段代碼中,class="ui-li-aside"可以實現該元素在列表右上角的效果。

<li>
    <a href="">
      <h1>G1次</h1>
      <p>上海南——北京西</p>
      <p class="ui-li-aside">2018年3月15日17:30開</p>
    </a>
</li>
ui-li-aside實現元素在列表項右上角的效果.png

如果要在列表中添加搜索框,要使用 data-filter="true" 屬性:

<ul data-role="listview" data-inset="true" data-filter="true">
    <li>
         <a href="">
          <h1>G1次</h1>
          <p>上海南——北京西</p>
          <p class="ui-li-aside">2018年3月15日17:30開</p>
      </a>
    </li>
    <li><a href="">項目2</a></li>
    <li><a href="">項目3</a></li>
    <li><a href="">項目4</a></li>
    <li><a href="">項目5</a></li>
</ul>

列表中添加搜索框.png

默認搜索框中的文本是"Filter items..."。如需修改默認文本,使用data-filter-placeholder屬性。例:

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

4、表單
使用html原生表單即可。
jqm建議每一個input都添加一個label,每個input元素都有name屬性和id屬性。
要想表單自適應,需要為每一個表單元素添加帶有類ui-field-containdivinput(input和其對應的label)標簽包裹起來,當屏幕大于480px時label和對應的input會水平顯示,否則上下顯示。

<div data-role="content">
    <form action="">
        <div class="ui-field-contain">
            <label for="ipt1">發車站</label>
            <input type="text" name="ipt1" id="ipt1">
        </div>
        <div class="ui-field-contain">
            <label for="ipt2">終點站</label>
            <input type="text" name="ipt2" id="ipt2">
        </div>
        <div class="ui-field-contain">
            <label for="ipt3">車次</label>
            <input type="text" name="ipt2" id="ipt2">
        </div>
    </form>
</div>
ipad顯示效果.png
iPhone6顯示效果.png

如果將所有的input包裹在一個帶有類ui-field-containdiv中會怎么樣呢?

一個div包裹所有ipad顯示效果.png

當屏幕大于480px時label和對應的input會水平顯示,但是上下表單元素之間沒有間隔,很不美觀。
一個div包裹所有iphone6顯示效果.png

當屏幕小于480px時label和對應的input會上下顯示,表單元素之間少了分割線,間隔也縮小了。
相比較而言,還是每一個表單元素單獨包裹一個帶有類ui-field-containdiv更美觀。

5、表格
jqm對原生表格提供了reflow table mode模式(回流表格模式),在較寬的屏幕下展示普通的表格列,在較窄的屏幕下將數據堆疊變成表單式表格。

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
table ipad.png

table iphone6.png

data-role="table"jqm下的表格
data-mode="reflow" class="ui-responsive"回流表格,自適應
class="table-stroke" 為每一行添加下劃線

五、事件

jqm中可以使用任何標準的jquery事件。
jqm還提供了若干為移動瀏覽器定制的事件:
觸摸事件:觸摸屏幕時觸發(敲擊、滑動)touch、tap、taphold(長按)、swipe(在某個元素上水平滑動超過30px)
滾動事件:上下滾動時觸發scrollstart、scrollstop
方向事件:設備垂直或水平旋轉時觸發
頁面事件:頁面被顯示、隱藏、創建、加載、卸載時觸發
在 jQuery Mobile 中,使用 pageinit 事件來阻止 jQuery 代碼在文檔結束加載 前運行:

$(document).on("pageinit","#pageone",function(){
   //  jQuery 事件...
});

六、jqm ajax和ajax跨域

jqm中使用ajax和在jquery中一致。
https://www.imooc.com/video/4233
有時需要在請求ajax期間顯示加載提示框,這是可手動顯示jqm加載器。

$.mobile.loading("show");

加載完畢的回調函數中可以在讓它隱藏:

$.mobile.loading("hide");

單純的前端方式解決跨域:
www.corsproxy.com
通過cors(跨域資源共享)Proxy對請求進行轉發。服務器端對于cors的支持,主要是通過設置Access-Control-Allow-Origin來進行。
在地址后面加上url,如地址為www.xxx.com/service,則修改為www.corsproxy.com/www.xxx.com/service即可。
這種方式被同源策略所禁止。

http://www.w3school.com.cn/jquerymobile/jquerymobile_events_intro.asp

jquery mobile學習的一些網站:
http://www.w3school.com.cn/jquerymobile/
http://www.imooc.com/learn/207

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容