jQuery Mobile高手必備的十大技巧和代碼片斷

時間 2019-12-02

標籤 jquery mobile 高手必備十大技巧代碼片斷欄目 JQuery 简体版

原文原文鏈接

與任何新技術同樣，經常難就難在如何開始入手。javascript

有鑑於此，咱們整理出了與jQuery Mobile庫有關的我認爲最便利的一些技巧、方法和代碼片斷。php

因爲本文不是旨在全面介紹使用jQuery Mobile庫的入門知識，會忽略掉一些至關淺顯的東西，而是直接探討一些至關棘手的東西。css

另外歡迎留言，告訴咱們你以爲哪些代碼片斷很實用，以及你所知道的其餘任何實用的代碼片斷。html

一、完整的基本頁面java

我一再發現本身須要爲基本頁面創建完整的標記。正由於如此，下面是建立一個基本頁面所須要的所有代碼。jquery

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    </head>
    <body>
    <div data-role="page" id="home">
     <div data-role="header">
      <h1>Header</h1>
     </div>
     <div data-role="content">
      <p>Content goes here</p>
     </div>
     <div data-role="footer">
      <h4>Footer</h4>
     </div>
    </div>
    </body>
    </html> android

二、何處添加額外的jQuery調用css3

當我開始使用jQuery的這個優秀擴展時，當即發現本身須要在觸發移動插件以前改動頁面上的內容。ajax

結果發現，建議的解決辦法就是隻要把傳統的jQuery調用放在裝入移動插件的引用以前。這樣，你的jQuery命令就有機會在庫裝入以前運行。下面是要遵守的模式：iphone

三、同時禁用全部連接的AJAX導航

儘管AJAX導航技術很出色，但有時候你倒但願禁用它。使用這一段jQuery代碼，告訴jQuery Mobile庫不要使用AJAX導航。

把它放在頁面標題中jQuery Mobile庫引用的後面。換句話說，庫必須已經在該代碼被引用以前裝入完畢。

四、阻止一些關鍵項目被截斷

庫的一項特性(或者是缺點，就看你的須要了)在於，它可以智能化地截斷很長的項目，以適應用戶界面元素。

我發如今兩種狀況下這可能很煩人。首先在列表項目中，我更喜歡看到所有文本。其次是在腳註文本中。一旦你在這裏有好多個字符，它彷佛就會開始用「…」來截斷。使用這個簡單的CSS來覆蓋這兩種默認狀況。

對於列表項目：

    body .ui-li .ui-li-desc {
     white-space: normal;
     }

對於腳註內容：

    body .ui-footer .ui-title {
     white-space: normal;
     }

五、使用媒體查詢來鎖定設備

我在使用這個庫時最早遇到的問題之一是，如何使用CSS來鎖定設備(根據屏幕尺寸)。好比說，我想要爲iPad設計兩列布局、爲智能手機設計單列布局。要作到這一點，最佳辦法絕對是使用媒體查詢。

只要一些簡單的媒體查詢已到位，你就能迅速讓CSS鎖定屏幕尺寸。有了這種鎖定技術，咱們就能依賴傳統的CSS方法，根據可用的屏幕空間來迅速建立不一樣的佈局。

這方面的兩篇出色的文章是：

CSS-Tricks網站的《CSS媒體查詢和使用可用空間》

Stuff and Nonsense網站的《切合實際的CSS3媒體查詢》

六、用jQuery鎖定平臺

儘管咱們很想爲某些設備執行某些CSS，但咱們也想只在特定的設備上運行jQuery。下面對來自Snipplr的一些代碼做了改動，那樣我很容易把jQuery的一部分隔離開來，以便根據用戶的設備來運行。

ar deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if(agentID.indexOf("iphone")>=0){
alert("iphone");
}
if(agentID.indexOf("ipod")>=0){
alert("ipod");
}
if(agentID.indexOf("ipad")>=0){
alert("ipad");
}
if(agentID.indexOf("android")>=0){
alert("android");
}

七、爲表單動做屬性的目標使用徹底路徑

jQuery Mobile庫的一個不便之處彷佛在於，很難找到張貼表單的目標頁面;也就是說，除非你使用來自網站根目錄的徹底路徑。

好比說，我發現這個表單標籤歷來找不到其目標：

而像這樣的徹底路徑能夠起到應有的工做：

<form action="/current-directory/form-handler.php" method="get" >

另外，還要確信來自表單處理程序的結果會生成一個完整、有效的jQuery Mobile頁面，如第一個技巧所示。

八、建立彈出式對話框

jQuery Mobile庫的一項便利特性就是內置的彈出內容或對話框特性。建立這項便利的特性簡單得很。基本上只要添加須要連接的屬性，以下所示：data-rel="dialog"。

注意兩點。首先，目標頁面必須是完整的jQuery Mobile頁面，如第一個技巧所概述。其次，這隻適用於外部頁面;它必須是完整的單獨頁面才能正常工做。

九、「Cancel」和「Save」組合按鈕

這段代碼知足了兩個基本要求。第一個要求是，讓兩個按鈕彼此相鄰。幸虧，jQuery Mobile庫有一種內置的列結構，只要使用標籤和合適的類，很容易利用這種結構，以下所示。第二個要求是，讓兩個按鈕有不一樣的主題。這段代碼直接來自說明文檔，我把它留在手邊，以便常用。

    <fieldset>
     <div><button type="submit" data-theme="c">Cancel</button></div>
     <div><button type="submit" data-theme="b">Submit</button></div>
    </fieldset>

十、自行建立列結構

我在竭力爲多個設備設計最佳的單個頁面結構時，發現本身常常結合運用上述的媒體查詢技巧和「隨意順序的列」(columns in any order)方法。

幸虧，Web開發人員很早之前就弄清楚瞭如何移動列。結合運用這個方法和媒體查詢，咱們就能夠根據所處理的屏幕尺寸，很容易建立各類結構。

Position Is Everything網站展現了最容易使用的方法之一。本文出自：http://shiyun1013.blog.163.com/blog/static/1077403620118213340288/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。