建立自訂 jQuery 移動主題

標籤：des   style   class   blog   c   code   

自訂頁面、工具列、內容、表單元素、列表、按鈕等元素的外觀

智能電話和平板裝置的高採用率最終導致增加了對移動 Web 開發人員和設計師的需求。jQuery Mobile 架構支援您建立能與原生應用程式開發結果相匹敵的移動 Web 體驗，讓使用者能夠通過 網頁瀏覽器提供對應用程式和網站的及時訪問，而不是讓他們下載和安裝行動裝置 App程式。本文將瞭解如何使用 jQuery Mobile 主題架構建立具有自訂品牌的移動網站和 Web 應用程式。

0 評論：

Kris Hadlock, Web 開發人員/設計師, Studio Sedition

2012 年 5 月 25 日

• 內容

jQuery Mobile 架構是一個 JavaScript 庫，您可使用它輕鬆地建立網站的移動版本，將現有的網頁轉換為適合觸摸 (touch-friendly) 的網站和應用程式。jQuery Mobile 架構允許使用者通過 網頁瀏覽器直接連接適合觸摸的應用程式，它影響了在移動和平板裝置上訪問和分發行動裝置 App程式的方式。

移動和平板裝置採用率急速上漲，jQuery Mobile 架構通過提高產生移動網站的速度，使開發人員能夠滿足對這些移動 Web 體驗的不斷高漲的需求。

具體來講，jQuery Mobile 包含一個您可以輕鬆自訂的主題架構。自訂色板和表徵圖集的能力提供了頁面、工具列、內容、表單元素、列表、按鈕等元素的自訂佈景主題。本文簡單概述了如何為這些 jQuery Mobile 元素類型中的每一種建立自訂佈景主題。自訂佈景主題允許您建立網站的移動版本，這些版本與其案頭版本具有相同的品牌。

jQuery Mobile 主題

jQuery Mobile 有一種可選的推薦標準 Web 應用程式頁面結構，它包含一些通用的結構，比如包含頁首、內容和頁尾內容的頁面元素。為了定義這些元素，jQuery Mobile 架構使用了 HTML5 data-role 屬性。清單 1 清單 1 給出了 jQuery Mobile 的受推薦 HTML 範本的一個樣本，對每個主要元素都使用了 data-role。

清單 1. 一個使用頁面 data-role 的元素

<div data-role="page"><div data-role="header"><h1>Page Title</h1></div><div data-role="content"><p>Page content goes here.</p></div><div data-role="footer"><h4>Page Footer</h4></div></div>

另一個非常重要且值得推薦的元素是 <meta viewport> 標記。這個標記指定一個瀏覽器應該如何顯示移動網站。以下代碼展示了如何添加一個<meta> 標記來為行動裝置設定 viewport：

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta viewport> 標記對於基於訪問移動網頁的裝置來恰當呈現該網頁很重要。沒有此標記，您的網頁將顯示得很小或被縮小，就像任何不是針對行動裝置而構建的正常網頁將顯示的那樣。圖 1 顯示一個移動網頁，它使用了 <meta viewport> 標記，並顯示了更適合所使用裝置的內容。

圖 1. 一個使用 <meta viewport> 標記的移動網頁 標記的移動網頁" src="http://www.ibm.com/developerworks/cn/mobile/mo-jquery-mobile-themes/figure1.jpg" width="385">

jQuery Mobile 架構套件含一個頁面主題系統，提供了對頁面元素外觀和樣式的全面控制。HTML5 data-theme 屬性可添加到一個元素中，以便應用現有的 jQuery Mobile 主題色板或一個新的色板。該主題系統包含 5 個色板，使用一個字母來標識每個色板，例如，A-E 是 jQuery Mobile 架構原生提供的色板。您可以下載 jQuery Mobile 架構所提供的 CSS 檔案，查看現有的色板。要建立新色板，您可以使用字母表中任何未使用的字母（即 F-Z）。確定了希望使用的字母后，您可以引用任何現有的色板，為所有頁面元素複製和自訂類。

 

回頁首

頁面主題

頁面主題由包含整個網頁的 HTML 元素的樣式組成。jQuery Mobile 的受推薦頁面結構中包含一個 <div> 元素，該元素有一個包含該頁面的值的data-role 屬性。要設定此元素的樣式，可對它應用一個 data-theme 屬性，為新的色板指定一個惟一且未使用的值，以便可以為它編寫一個自訂 CSS。以下代碼顯示了使用 data-theme 值 F 的 page 元素的樣本：

<div data-role="page" data-theme="f">

通過使用這個 data-role 和 data-theme，jQuery Mobile 架構實際上在 page 元素中建立並添加了一些 CSS 類。以下是在經過架構處理後，瀏覽器中的輸出的樣本：

<div data-role="page" data-theme="f" class="ui-page ui-body-f ui-page-active" style="min-height: 580px;">

可以看到，page 元素中添加了一些 CSS 類。ui-page 和 ui-page-active 類已基於 data-role 值 page 進行了分配，ui-body-f 類基於data-theme 值 F 進行了分配。您可以使用任何這些類來設定 page 元素或它的內容的樣式。清單 2 給出了使用 ui-body-f 類向 page 元素添加自訂樣式的樣本。

清單 2. 使用 CSS 設定 jQuery Mobile 頁面元素的樣式

.ui-body-f {  background-color: #f9f9f9;  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;}

您添加到此類的自訂 CSS 設定移動網頁中使用的背景顏色和字型。建立了頁面的色板之後，您可以更詳細地設定您所針對的 HTML 元素以及為其設定樣式的 HTML 元素。例如，清單 3 展示了如何設定 page 元素中出現的輸入文本和密碼欄位的樣式。

清單 3. 設定頁面元素中顯示的所有輸入文本和密碼欄位的樣式

.ui-body-f input[type="text"], .ui-body-f input[type="password"] {  background-color: #ccc;}

一旦您獲得了 page 元素的控制權，就存在無限可能。藉助這個包含網頁內容的包含元素，您可以真正自訂任何元素。

 

回頁首

工具列主題

在 jQuery Mobile 架構中，工具列是頁首和頁尾元素。要將工具列定義為頁首或頁尾，您可以使用 data-role 屬性。data-role 屬性的值應該為 header 或 footer，具體取決於您建立的元素。清單 4 提供了 page 元素中包含的頁首和頁尾工具列的樣本。

清單 4. 使用頁首和頁尾工具列

<div data-role="header"><h1>Page Title</h1></div><div data-role="footer"><h4>Page Footer</h4></div>

為工具列分配一個主題非常簡單，只需使用 data-theme 屬性並為它提供一個自訂色板值即可。預設情況下，系統為頁首和頁尾工具列分配了 a 色板來顯示可視的分層結構。以下是分配給頁首工具列的一個自訂佈景主題的樣本：

<div data-role="header" data-theme="f"><h1>Page Title</h1></div>

要設定此主題的樣式，您需要為該欄建立一個新的 CSS 類（清單 5）。

清單 5. 設定頁首工具列的樣式

.ui-bar-f {  padding: 10px 0px;  background-color: #069;  border-bottom: 2px solid #036;  color: #fff;}

這個新的自訂 CSS 類設定所有應用了 F data-theme 的工具列的樣式。但是，您可能常常希望頁首和頁尾看起來不同。要實現這種差異，則需要建立一個新的自訂佈景主題（將它命名為 G），並建立一個新 CSS 類來設定它的樣式（清單 6）。

清單 6. 為頁首工具列添加一個自訂 CSS 類

.ui-bar-g {  margin-top: 20px;  padding: 10px 0;  color: #fff;  border-bottom: 2px solid #000;  background-color: #000;  background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,0.65) 100%);   /* FF3.6+ */  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,  rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,  rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%);   /* Opera11.10+ */  background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%);   /* IE10+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#cccccc‘,   endColorstr=‘#a6000000‘,GradientType=0 ); /* IE6-9 */  background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%);   /* W3C */}

G 工具列主題設定了一些基本屬性，但它還包含針對不同瀏覽器的複雜的多種漸層。這些漸層非常複雜，但幸運的是您不需要記住如何建立它們，因為一些網站將為您產生這些漸層。所以，您只需將代碼複製並粘貼到您的 CSS 類中即可。請參閱閱本文的 參考資料 部分，擷取為您的網站產生漸層的連結。

 

回頁首

內容主題

content 元素可使用您選擇的自訂色板設定主題。要為您的移動網站中的內容建立自訂色板，必須先建立一個 content 元素（參見 清單 7）。

清單 7. 向您的內容元素添加一個可摺疊的內容塊

<div data-role="collapsible" data-collapsed="true" data-theme="f">    <h3>>Login</h3>    Login form will go here</div>

這個內容塊將在載入頁面時摺疊。當使用者單擊標題列時，它會顯示您稍後要建立的登入表單。要設定這個內容塊的樣式，只需將一個 data-theme 分配給它並建立一個自訂 CSS 類即可。清單 8 提供了一些與可摺疊的內容塊和它的內容相關聯的自訂類的樣本。

清單 8. 與可摺疊內容塊的標題列關聯的自訂 CSS 類

ui-body-f .ui-collapsible-contain .ui-collapsible-heading .ui-btn-up-f {  background: #666;  color: #fff;  text-decoration: none;}.ui-body-f .ui-collapsible-contain .ui-collapsible-heading .ui-btn-down-f, .ui-body-f .ui-collapsible-contain .ui-collapsible-heading .ui-btn-hover-f {  background: #999;  color: #fff;  text-decoration: none;}

這些 CSS 類定義了可摺疊的標題列的不活動、活動和懸停狀態。清單 7 中的 <h3> 標記使用一個 ui-collapsible-heading 類轉換為了<h3>；包含的文本（在本例中為 “Login”）通過一些類轉換為一個超連結，具體操作取決於所處的狀態。用於這個超連結的 3 個類是 ui-btn-up-f、ui-btn-down-f 和 ui-btn-hover-f。這些類中的每一個都無需加以說明，它們涵蓋了可摺疊內容塊的標題列的釋放、按下和懸停狀態。這些類依據 data-theme 值而更改，所以這些類在末尾附加了一個 F；如果您希望使用 data-theme 值 G，這些類將一個 G 附加到末尾，代替 F。

 

回頁首

列表主題

列表在移動網頁上很常見，因為它們提供了一種為忙碌的人們快速顯示選項的方式。要將一個常規 HTML 列錶轉換為富有吸引力且易於在觸摸裝置上使用的移動列表，只需將 data-role 屬性設定為 listview 即可，如 清單 9 中所示。

清單 9. 將一個簡單的 HTML 列錶轉換為一個適合觸摸的列表

<ul data-role="listview" data-inset="true" data-theme="f">  <li><a href="#">Title name</a></li>  <li><a href="#">Title name</a></li>  <li><a href="#">Title name</a></li></ul>

預設情況下，列表顯示為瀏覽器視窗的完整寬度，如 圖 2 所示。

圖 2. jQuery Mobile 中的列表視圖的預設面板

但是，如果您希望插入清單項目並設定圓角，您可以使用 data-inset 屬性並將它的值設定為 true，如 圖 3 中所示。

圖 3. 一個將 data-inset 屬性設定為 true 的列表視圖

向 listview 添加一個主題很簡單。就像其他每個主題一樣，只需分配一個 data-theme 值即可。清單 9 使用 F 作為主題值。要自訂欄表項，則需要使用 CSS 來設定它們，如 清單 10 所示。

清單 10. 自訂欄表項

.ui-listview .ui-btn-up-f a, .ui-listview .ui-btn-down-f a, .ui-listview .ui-btn-hover-f a {  color: #fff;}

您使用 中的 CSS 設定的元素是清單項目中的實際超連結，使用這些元素是為了將文本顏色設定為白色。ui-btn-up-f、ui-btn-down-f 和 ui-btn-hover-f 類都由 jQuery Mobile 注入，用於處理清單項目的不同狀態。

 

回頁首

表單和按鈕主題

您採用與任何網站相同的方式，使用 jQuery Mobile 架構為移動網站建立一個表單：只需添加輸入元素和關聯的標籤即可，它們將出現在現有的頁面主題上。清單 11 提供了一個樣本。

清單 11. 建立一個移動表單

<div data-role="collapsible" data-collapsed="true" data-theme="f">  <h3>>Login</h3>  <form action="" method="post">    <label for="username">Username</label>    <input type="text" name="username" id="username" />    <label for="username">Password</label>    <input type="password" name="password" id="password" />    <fieldset class="ui-grid-a">      <div class="ui-block-a">        <button type="reset" data-inline="true">Reset</button>      </div>      <div class="ui-block-b">        <button type="submit" data-inline="true" data-theme="f">Submit</button>      </div>    </fieldset>  </form></div>

表單元素也可以設定自訂佈景主題。清單 12 給出了一個使用您的 page 元素中的 F 主題設定表單樣式的樣本。

清單 12. 自訂您的登入表單中使用的輸入元素的樣式

.ui-body-f input[type="text"], .ui-body-f input[type="password"] {  background-color: #ccc;}

在 清單 11 中，您可能已注意到包含自訂按鈕代碼的 fieldset。每個按鈕都有一個與之關聯的不同主題：Reset 按鈕使用預設主題，而Submit 按鈕使用 F 主題。清單 13 給出了為這兩個按鈕建立的用來實現不同外觀的自訂 CSS 類。

清單 13. 表單按鈕的自訂 CSS 類

.ui-btn-up-f {  background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%,   rgba(78,137,197,0.65) 100%); /* FF3.6+ */  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,  rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%,  rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,  rgba(78,137,197,0.65) 100%); /* Opera11.10+ */  background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%,  rgba(78,137,197,0.65) 100%); /* IE10+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#396b9e‘,   endColorstr=‘#a64e89c5‘,GradientType=0 ); /* IE6-9 */  background: linear-gradient(top, rgba(57,107,158,1) 0%,  rgba(78,137,197,0.65) 100%); /* W3C */  border: 1px solid #225377;  text-shadow: #225377 0px -1px 1px;  color: #fff;}.ui-btn-down-f, .ui-btn-hover-f {  background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%,   rgba(75,136,182,0.65) 100%); /* FF3.6+ */  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,  rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%,  rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%);   /* Opera11.10+ */  background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%,  rgba(75,136,182,0.65) 100%); /* IE10+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#72b0d4‘,   endColorstr=‘#a64b88b6‘,GradientType=0 ); /* IE6-9 */  background: linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%);   /* W3C */  border: 1px solid #00516E;  text-shadow: #014D68 0px -1px 1px;  color: #fff;}

您可以看到，Save 按鈕有一個與之關聯的自訂漸層，使它能夠與 Reset 按鈕區別開來。對按鈕集使用多個主題是確定哪個按鈕是最重要或主要按鈕的好方法。

 

回頁首

結束語

一旦您理解了 data-theme 屬性和 jQuery Mobile 架構所提供的元素，就會發現使用該架構為適合觸摸的網站設定主題很簡單。增加了 data-theme 屬性後，您可以分配自訂值和關聯的自訂 CSS 類，它們會使您能夠使用 jQuery Mobile 架構建立適合觸摸的網站。要瞭解該架構的更多資訊，請參閱 參考資料 一節，或者採用更好的方法，使用 下載 一節中的範例程式碼親自測試一些自訂 CSS。

 

回頁首

下載

描述	名字	大小
樣本 jQuery 移動網頁	jquery-mobile-custom-themes.zip	4KB

參考資料學習

• 查閱最新的 jQuery Mobile 架構文檔。
• ColorZilla 是一個漸層產生器，它使得使用 CSS 建立漸層變得很容易。
• 在 jQuery Mobile 網站上尋找最新的 按鈕表徵圖 的完整列表。
• 在 developerWorks Web 開發專區 中，可以尋找數百篇 技巧文章和教程，以及適合 Web 開發人員的下載、討論論壇和其他豐富資源。
• 在 developerWorks 移動開發部落格 上檢查移動更新。
• 您將在 developerWork 上找到 數百篇與移動相關的文章。
• 觀看 developerWorks 示範中心，包括面向初學者的產品安裝和設定，以及為經驗豐富的開發人員提供的進階功能。

獲得產品和技術

• 從 jQuery Mobile 架構網站下載 jQuery Mobile。
• 下載並試用 IBM Mobile Technology Preview，一組代碼範例和服務，可以協助您開始構建可擴充和整合到企業中的行動裝置 App程式。該預覽包括一個 RESTful 通知服務；一個用於構建混合行動裝置 App程式的開源架構 PhoneGap；一個輕量級的 WebSphere Application Server 運行時；以及向您示範其工作方式的範例代碼。
• IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile 包括 IBM Dojo 1.7 Toolkit、新的移動和富 Internet 應用程式 (RIA) 構建塊，以及一個基於 Dojo 的圖表組件。使用附帶的 Rational 工具，該 Feature Pack 可協助您採用原先面向案頭瀏覽器開發的 WebSphere 應用程式，對其進行調整，並將它們部署到行動裝置中。
• 以最適合您的方式 評估 IBM 產品：下載產品試用版，線上試用產品，在雲環境下試用產品，或者在 SOA 沙箱 中花費幾個小時來學習如何高效實現面向服務架構。