jQuery Mobile 快速指南

上一頁
下一頁

jQuery Mobile - 概述

jQuery Mobile是一個使用者介面框架，它基於jQuery Core構建，用於開發可在移動裝置、平板電腦和桌上型電腦上訪問的響應式網站或應用程式。它利用jQuery和jQuery UI的功能，為移動Web應用程式提供API功能。

它由jQuery專案團隊於2010年開發，並用JavaScript編寫。

為什麼要使用jQuery Mobile？

  • 它建立的Web應用程式可以在移動裝置、平板電腦和桌上型電腦上以相同的方式執行。

  • 它與其他框架相容，例如PhoneGap、Whitelight等。

  • 它提供了一套觸控友好的表單輸入和UI小部件。

  • 漸進增強為所有移動裝置、平板電腦和桌上型電腦平臺帶來了獨特的功能，並增加了高效的頁面載入和更廣泛的裝置支援。

jQuery Mobile 的特性

  • 它基於jQuery Core和“少寫程式碼，多做事情”的UI框架。

  • 它是一個開源框架，並且是跨平臺和跨瀏覽器相容的。

  • 它用JavaScript編寫，並使用jQuery和jQuery UI的功能來構建移動友好的網站。

  • 它將HTML5、CSS3、jQuery和jQuery UI整合到一個框架中，用於建立指令碼最少的頁面。

  • 它包含一個使用動畫頁面過渡的Ajax導航系統。

jQuery Mobile 的優勢

  • 如果您瞭解HTML5、CSS3特性，那麼學習和開發應用程式很容易。

  • 它是跨平臺和跨瀏覽器相容的，因此您不必擔心為每個裝置解析度編寫不同的程式碼。

  • 您可以使用ThemeRoller建立自定義主題，無需編寫任何程式碼。它支援所有HTML5瀏覽器。

  • 它使用HTML5和JavaScript，方便開發Web應用程式。

  • 它的構建方式允許相同的程式碼自動從移動螢幕縮放至桌面螢幕。

jQuery Mobile 的劣勢

  • CSS主題選項有限，因此使用這些主題構建的網站可能看起來相似。

  • 使用jQuery Mobile開發的應用程式在移動裝置上執行速度較慢。

  • 將jQuery Mobile與其他移動框架結合使用會更加耗時。

  • 難以提供完全自定義的視覺化設計。

  • 並非所有裝置功能都可以被瀏覽器中的JavaScript訪問。

jQuery Mobile - 設定

本章將討論如何安裝和設定jQuery Mobile。

下載jQuery Mobile

當您開啟連結jquerymobile.com/時，您將看到兩個下載jQuery Mobile庫的選項。

jQuery Mobile

  • 自定義下載 - 點選此按鈕下載庫的自定義版本。

  • 最新穩定版 - 點選此按鈕獲取jQuery Mobile庫的穩定且最新的版本。

使用下載構建器進行自定義下載

使用下載構建器，您可以建立一個自定義版本，其中只包含您需要的庫部分。當您下載此新的jQuery Mobile自定義版本時，您將看到以下螢幕。

jQuery Mobile

您可以根據需要選擇庫，然後點選構建我的下載按鈕。

穩定版下載

點選穩定版按鈕，它將直接連結到包含CSS和jQuery檔案的ZIP檔案，其中包含jQuery Mobile庫的最新版本。將ZIP檔案內容解壓到jQuery Mobile目錄。

此版本包含所有檔案，包括所有依賴項、大量演示，甚至庫的單元測試套件。此版本有助於入門。

從CDN下載jQuery庫

CDN（內容分發網路）是一個伺服器網路，旨在向用戶提供檔案。如果您在網頁中使用CDN連結，它會將託管檔案的責任從您自己的伺服器轉移到一系列外部伺服器。這也提供了一個優勢，如果您的網頁訪問者已經從同一個CDN下載了jQuery Mobile的副本，則無需重新下載。您可以將以下CDN檔案包含到HTML文件中。

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

在本教程中，我們始終使用CDN版本的庫。我們使用AMPPS（AMPPS是Apache、MySQL、MongoDB、PHP、Perl和Python的WAMP、MAMP和LAMP堆疊）伺服器來執行所有示例。

示例

以下是jQuery Mobile的一個簡單示例。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

以上程式碼的詳細資訊如下：

  • 此程式碼位於head元素內。

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

    • 視口用於指定（由瀏覽器）顯示頁面縮放級別和尺寸。

    • content = "width = device-width" 用於設定頁面或螢幕裝置的畫素寬度。

    • initial-scale = 1 設定初始縮放級別，即頁面首次載入時的縮放級別。

  • 包含以下CDN

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  • <body>標籤內的內容是在瀏覽器中顯示的頁面。

<div data-role = "page">
   ...
</div>

  • data-role = "header" 在頁面頂部建立頁首。

  • data-role = "main" 用於定義頁面的內容。

  • data-role = "footer" 在頁面底部建立頁尾。

  • class = "ui-content" 包含頁面內容內的填充和邊距。

輸出

讓我們執行以下步驟來檢視以上程式碼是如何工作的：

  • 將上述html程式碼儲存為simple_example.html檔案，放在伺服器的根資料夾中。

  • 開啟此HTML檔案，地址為https:///simple_example.html，將顯示以下輸出。

jQuery Mobile - 頁面

使用者可以與jQuery Mobile頁面互動，該頁面將內容分組到邏輯檢視和頁面檢視中。頁面檢視可以使用頁面過渡進行動畫處理。可以使用HTML文件建立多個頁面，因此無需從伺服器請求內容。

下表詳細介紹了各種頁面型別。

序號 型別和描述
1 單頁面

使用標準的模板編寫方式在HTML文件中建立一個單頁面。
2 多頁面模板

可以在單個HTML文件中包含多個頁面，透過新增多個帶有data-role = "page"的div來一起載入。
3 對話方塊頁面

模態對話方塊在頁面上方開啟一個互動式疊加層內容。

約定，而非要求

  • data-role屬性元素（如頁首、頁尾、頁面和內容）用於提供頁面的基本格式和結構。

  • 對於單頁面文件，頁面包裝器對於自動初始化是可選的。

  • 對於具有自定義佈局的網頁，可以排除結構元素。

  • 為了管理頁面，框架會在標記中未包含頁面包裝器時注入它。

預取頁面

包含屬性data-prefetch，我們可以在單頁面模板中將頁面預取到DOM中。更多資訊點選這裡。

DOM快取

當瀏覽器記憶體在DOM中已滿時，由於載入多個頁面，它會降低移動瀏覽器速度或可能崩潰。這裡有一個簡單的保持DOM整潔的方法：

  • 當頁面透過ajax載入時，它指示在您重定向到另一個頁面時從DOM中刪除頁面。

  • 當您重新訪問之前訪問過的頁面時，可以從快取中檢索它。

  • 您可以使用以下行來告訴jQuery Mobile將其保留在DOM中，而不是刪除頁面：

$.mobile.page.prototype.options.domCache = true;

  • 將page外掛上的domCache選項設定為true，以將所有之前訪問過的頁面保留在DOM中。

pageContainerElement.page({ domCache: true });

jQuery Mobile - 圖示

jQuery Mobile提供了一組內建圖示，可用於按鈕、列表檢視按鈕，這將使按鈕更具吸引力。

下表列出了jQuery Mobile框架中使用的一些圖示。

序號 圖示區域和描述
1 圖示集

它在按鈕中設定圖示。
2 圖示定位

它指定按鈕中圖示的位置。
3 僅圖示

它只在按鈕中顯示一個圖示。
4 圖示陰影

它在您的按鈕中新增圖示陰影。
5 移除圓圈

它移除圖示周圍的灰色圓圈。
6 黑色或白色圖示

它將圖示的顏色更改為黑色或白色。
7 組合alt和nodisc

它將alt和nodisc類組合到圖示中。

jQuery Mobile - 轉場動畫

它允許更改在指定持續時間內發生的屬性值，並透過為每個狀態應用不同的樣式來更改元素的行為，使其從一種狀態變為另一種狀態。

下表列出了jQuery Mobile框架中使用的一些頁面過渡：

序號 過渡和描述 頁面 對話方塊
1

淡入淡出

您可以使元素淡入淡出可見。

 淡入淡出頁面 淡入淡出對話方塊
2

翻轉

將元素從背面翻轉到正面到下一頁。

 翻轉頁面 翻轉對話方塊
3

彈出

您可以建立一個彈出視窗。

 彈出頁面 彈出對話方塊
4

流動

透過將當前頁面移開來顯示下一頁。

 流動頁面 流動對話方塊
5

滑動

您可以將頁面從右向左滑動。

 滑動頁面 滑動對話方塊
6

滑動淡入

將頁面從右向左滑動，然後淡入下一頁。

 滑動淡入頁面 滑動淡入對話方塊
7

向上滑動

將頁面從底部向上滑動。

 向上滑動頁面 向上滑動對話方塊
8

向下滑動

將頁面從頂部向下滑動。

 向下滑動頁面 向下滑動對話方塊
9

翻頁

您可以翻到下一頁。

 翻頁頁面 翻頁對話方塊
10

無

使用此屬性不能使用任何過渡效果。

 無頁面 無對話方塊

設定過渡和全域性配置

預設情況下，頁面在框架中將具有淡入淡出過渡。您可以透過向連結新增data-transition屬性來使用自定義過渡。您可以使用defaultPageTransition選項全域性使用不同的預設頁面過渡效果。對於對話方塊，您可以使用defaultDialogTransition選項。

備用過渡

除了淡入淡出過渡外，所有過渡都支援3D變換。不支援3D變換的裝置必須使用淡入淡出過渡。有些瀏覽器不支援每種過渡型別的3D變換，因此您可以使用淡入淡出作為預設過渡備用。

過渡的最大滾動

當您從頁面滾動或滾動到頁面時，並且滾動位置是裝置螢幕高度的三倍時，過渡將設定為無。有時，當您點選任何導航元素時，響應速度可能會變慢，或者瀏覽器可能會崩潰；因此，為了避免這種情況，我們使用getMaxScrollForTransition函式使用滾動位置進行過渡。

過渡的最大寬度

當視窗寬度大於畫素寬度時，您可以停用過渡效果。您可以使用$.mobile.maxTransitionWidth全域性選項配置過渡效果的最大寬度，該選項預設設定為false。它接受畫素寬度或false值，如果視窗寬度大於指定值，並且該值不是false，則過渡效果將設定為none。

同頁面過渡

您可以使用頁面容器小部件的change()方法的allowSamePageTransition選項向當前頁面新增過渡效果。

建立自定義過渡

您可以使用$.mobile.transitionHandlers選項在頁面中建立自定義過渡效果，從而擴充套件網站或應用程式中過渡效果的選擇。

jQuery Mobile - 佈局

網格系統用於透過一系列包含內容的行和列來建立頁面佈局。

下表詳細說明了網格的型別。

序號 型別和描述
1 網格

jQuery Mobile網格系統透過一系列行和列建立頁面佈局。
2 網格中的按鈕

jQuery Mobile中以網格格式排列的按鈕集合。
3 自定義響應式網格

可以使用CSS中的媒體查詢輕鬆地將基本網格樣式擴充套件到自定義響應式佈局。

jQuery Mobile - 小部件

小部件是jQuery Mobile應用程式中一個小的工具或控制元件。小部件非常方便，因為它們允許您將自己喜歡的應用程式放在主螢幕上以便快速訪問它們。

下表詳細說明了小部件的型別。

序號 型別和描述
1 按鈕

它指定一個可點選的按鈕，其中包含文字或影像等內容。
2 複選框

當需要選擇多個選項時，使用複選框。
3 單選框

當從多個選項中只需要選擇一個選項時，使用單選按鈕。
4 日期選擇器

它聚焦於輸入，以便在一個小的覆蓋層中開啟一個互動式日曆。
5 可摺疊

可摺疊允許您在單擊它時展開或摺疊內容。對於顯示簡短內容的移動裝置非常有用。
6 控制元件組

控制元件組提供一組按鈕來指定一個看起來像導航元件的單個塊。
7 可過濾

透過使用data-filter = "true"屬性，您可以過濾任何元素的子元素。
8 開關

單擊開關可以將其關閉/開啟或切換為真/假，用於布林型輸入。
9 列表檢視

列表檢視元件的目的是以列表的形式呈現複雜和自定義的內容。
10 載入器

jQuery Mobile提供了多種將載入狀態新增到元素的方法。
11 導航欄

導航欄小部件是一組按鈕，可將您連結到其他網頁或部分。
12 面板

面板用於在框中顯示DOM元件。
13 彈出視窗

彈出視窗是一個使用者介面，它出現在一個小視窗中以顯示文字、影像和其他內容。
14 範圍滑塊

範圍滑塊小部件提供一對滑塊，允許您選擇數值範圍。
15 選擇選單

選擇選單以下拉列表的形式提供各種選項，使用者可以從中選擇一個或多個選項。
16 滑塊

滑塊允許您透過滑動滑塊的滑塊來選擇一個值。
17 表格

jQuery Mobile使用表格以行和列的形式表示資料，即以表格格式顯示資料。
18 標籤

標籤小部件是jQuery UI標籤小部件的擴充套件，它接受所有方法和選項。
19 文字輸入

<input>標籤用於宣告一個輸入元素，這是一個允許使用者輸入資料的控制元件。
20 工具欄

jQuery Mobile工具欄小部件允許您建立頁首和頁尾。

jQuery Mobile - 事件

jQuery Mobile允許建立動態網頁。透過使用事件，您可以為元素設定事件驅動的流程，這些流程由使用者的互動觸發，例如滑鼠點選、滑鼠懸停在元素上、鍵盤按鍵等。

下表列出了一些jQuery Mobile支援的移動裝置事件。

序號 事件及說明
1 jQuery Mobile事件

當用戶點選特定頁面或將滑鼠懸停在元素上等操作時，它會響應使用者的互動。
2 jQuery觸控事件

當用戶觸控式螢幕幕時，它會提供觸控事件。
3 jQuery滾動事件

當用戶向上和向下滾動時，它會觸發滾動事件。
4 jQuery方向事件

當用戶垂直或水平旋轉裝置時，它會觸發方向事件。
5 jQuery頁面事件

當用戶隱藏、建立、載入或解除安裝頁面時，它會提供頁面事件。

jQuery Mobile - 表單

表單的建立很容易而且非常靈活，它是由標準化的表單元素和按鈕組合構建的。

下表詳細說明了表單的型別。

序號 型別和描述
1 表單基礎

jQuery Mobile為表單提供功能強大、簡單且通用的佈局系統，它結合了表單樣式、輸入按鈕和滑塊支援。
2 表單輸入

<input>標籤是一個允許使用者輸入資料的控制元件。
3 表單選擇

以選項的形式，提供下拉列表作為選擇選單。
4 表單滑塊

滑塊允許您透過滑動滑塊的滑塊來選擇一個值。
5 重新整理和表單元素的自動初始化

refresh方法用於自行更新表單控制元件的新狀態，並使用JavaScript更新表單控制元件。

jQuery Mobile - 主題

它在按鈕、導航欄、塊、連結等上設定不同型別的主題。您可以使用data-theme屬性設定主題。

下表描述了jQuery Mobile支援的不同區域中主題功能的使用。

序號 功能及說明
1 主題

它提供兩種不同的主題，例如主題“a”和主題“b”，以自定義應用程式的外觀。
2 在對話方塊中設定頁首和頁尾主題

設定對話方塊中頁首和頁尾的主題。
3 按鈕、圖示和彈出視窗的主題

指定按鈕、圖示和彈出視窗的主題。
4 頁首和頁尾中按鈕的主題

顯示頁首和頁尾中按鈕的主題。
5 導航欄主題

應用頁首或頁尾中導航欄的主題。
6 面板主題

您可以為面板應用主題。
7 可摺疊按鈕和分割按鈕主題

顯示可摺疊按鈕和分割按鈕的主題。
8 列表和可摺疊列表主題

顯示列表和可摺疊列表的主題。
9 可摺疊表單

您可以為表單應用主題。

jQuery Mobile - CSS 類

jQuery CSS類

您可以使用不同型別的CSS類來設定元素的樣式，如下節所述。

全域性類

以下類可以在jQuery Mobile小部件上用作全域性類：

序號 類及說明
1

ui-corner-all

它以圓角顯示元素。
2

ui-shadow

它為元素顯示陰影。
3

ui-overlay-shadow

它為元素顯示疊加陰影。
4

ui-mini

它顯示較小的元素。

按鈕類

下表列出了與錨點或按鈕元素一起使用的按鈕類：

序號 類及說明
1

ui-btn

它指定元素將被設定為按鈕樣式。
2

ui-btn-inline

它將按鈕顯示為內聯元素，根據需要節省標籤的空間。
3

ui-btn-icon-top

它將圖示放在文字上方。
4

ui-btn-icon-right

它將圖示放在文字右側。
5

ui-btn-icon-bottom

它將圖示放在文字下方。
6

ui-btn-icon-left

它將圖示放在文字左側。
7

ui-btn-icon-notext

它只顯示圖示。
8

ui-btn-a|b

它顯示按鈕的顏色（“a”將是預設背景顏色，即灰色，“b”將背景顏色更改為黑色）。

圖示類

下表列出了與錨點或按鈕元素一起使用的圖示類：

序號 類及說明
1

ui-icon-action

它顯示操作圖示。
2

ui-icon-alert

它在一個三角形內顯示感嘆號。
3

ui-icon-arrow-d-l

它指定向左下箭頭。
4

ui-icon-arrow-d-r

它指定向右下箭頭。
5

ui-icon-arrow-u-l

它指定向左上箭頭。
6

ui-icon-arrow-u-r

它指定向右上箭頭。
7

ui-icon-arrow-l

它指定左箭頭。
8

ui-icon-arrow-r

它指定右箭頭。
9

ui-icon-arrow-u

它指定上箭頭。
10

ui-icon-arrow-d

它指定下箭頭。
11

ui-icon-bars

它顯示三個水平條，一個在上。
12

ui-icon-bullets

它顯示三個水平點，一個在上。
13

ui-icon-carat-d

它顯示向下的小箭頭。
14

ui-icon-carat-l

它顯示向左的小箭頭。
15

ui-icon-carat-r

它顯示向右的小箭頭。
16

ui-icon-carat-u

它顯示向上的小箭頭。
17

ui-icon-check

它顯示覆選標記圖示。
18

ui-icon-comment

它指定註釋或訊息。
19

ui-icon-forbidden

它顯示禁止圖示。
20

ui-icon-forward

它指定前進圖示。
21

ui-icon-navigation

它指定導航圖示。
22

ui-icon-recycle

它顯示回收圖示。
23

ui-icon-refresh

它顯示重新整理圖示。
24

ui-icon-tag

它表示標籤圖示。
25

ui-icon-video

它表示影片或相機圖示。

主題類

它提供兩種不同的主題，例如主題“a”和主題“b”，以自定義應用程式的外觀。您可以透過附加色板字母（a-z）來建立自己的主題類。下表列出了從字母a到z指定的主題類。

序號 類及說明
1

ui-bar-(a-z)

它顯示條的顏色，包括頁首、頁尾和頁面中的其他條。
2

ui-body-(a-z)

它顯示內容塊的顏色，包括列表檢視、彈出視窗、滑塊、面板、載入器等。
3

ui-btn-(a-z)

它顯示按鈕的顏色。
4

ui-group-theme-(a-z)

它顯示控制元件組、列表檢視和可摺疊集的顏色。
5

ui-overlay-(a-z)

它顯示彈出視窗、對話方塊和頁面容器的背景顏色。
6

ui-page-theme-(a-z)

它顯示頁面的顏色。

網格類

下表列出了與等寬、無邊框、背景、邊距或填充一起使用的網格類。

序號 網格類 列 列寬 對應於
1 ui-grid-solo 1 100% ui-block-a
2 ui-grid-a 2 50%/50% ui-block-a|b
3 ui-grid-b 3 33%/33%/33% ui-block-a|b|c
4 ui-grid-c 4 25%/25%/25%/25% ui-block-a|b|c|d
5 ui-grid-d 5 20%/20%/20%/20%/20% ui-block-a|b|c|d|e

jQuery Mobile - 資料屬性

按鈕

它使用類ui-btn指定一個可點選的按鈕，其中包含文字或影像等內容。在1.4版本中已棄用。使用ui-btn屬性代替使用data-role = "button"屬性。

下表列出了與資料屬性一起使用的按鈕元素。

序號 資料屬性及說明 值
1

data-corners

它定義按鈕是否應包含圓角。

 true | false
2

data-icon

它定義按鈕的圖示。

 預設為無圖示
3

data-iconpos

它定義圖示的位置。

 left | right | top | bottom
4

data-iconshadow

它定義按鈕的圖示是否應包含陰影。

 true | false
5

data-inline

它定義按鈕是否應該內聯顯示。

 true | false
6

data-mini

它定義按鈕應該顯示為較小尺寸還是常規尺寸。

 true | false
7

data-shadow

它定義按鈕是否應該包含陰影。

 true | false
8

data-theme

它顯示按鈕的主題顏色。

 字母 (a-z)

複選框

下表列出了使用type = "checkbox" 的複選框元素。

序號 資料屬性及說明 值
1

data-mini

它定義複選框應該顯示為較小尺寸還是常規尺寸。

 true | false
2

data-role

它停止將複選框樣式化為按鈕。

 無
3

data-theme

它顯示覆選框的主題顏色。

 字母 (a-z)

可摺疊

下表列出了使用data-role = "collapsible" 屬性的可摺疊元素。

序號 資料屬性及說明 值
1

data-collapsed

它指示內容是否應該關閉或展開。

 true | false
2

data-collapsed-cue-text

它為使用螢幕閱讀器軟體的使用者顯示反饋。

 預設情況下摺疊內容
3

data-collapsed-icon

它定義可摺疊按鈕的圖示。

 預設圖示為“加號”
4

data-content-theme

它顯示可摺疊內容的主題顏色。

 字母 (a-z)
5

data-expanded-cue-text

它為使用螢幕閱讀器軟體的使用者顯示反饋。

 預設情況下展開內容
6

data-expanded-icon

展開內容時，它會顯示可摺疊按鈕。

 預設圖示為“減號”
7

data-iconpos

它定義圖示的位置。

 left | right | top | bottom
8

data-inset

它定義可摺疊按鈕是否應該顯示圓角和邊距。

 true | false
9

data-mini

它定義可摺疊按鈕應該顯示為較小尺寸還是常規尺寸。

 true | false
10

data-theme

它顯示可摺疊按鈕的主題顏色。

 字母 (a-z)

可摺疊集

下表列出了使用data-role = "collapsibleset" 屬性的可摺疊集元素。

序號 資料屬性及說明 值
1

data-collapsed-icon

它定義可摺疊按鈕的圖示。

 預設圖示為“加號”
2

data-content-theme

它顯示可摺疊內容的主題顏色。

 字母 (a-z)
3

data-expanded-icon

展開內容時，它會顯示可摺疊按鈕。

 預設圖示為“減號”
4

data-iconpos

它定義圖示的位置。

 left | right | top | bottom
5

data-inset

它定義可摺疊按鈕是否應該顯示圓角和邊距。

 true | false
6

data-mini

它定義可摺疊按鈕應該顯示為較小尺寸還是常規尺寸。

 true | false
7

data-theme

它顯示可摺疊按鈕的主題顏色。

 字母 (a-z)

控制元件組

下表列出了使用data-role = "controlgroup" 屬性的 Controlgroup 元素。

序號 資料屬性及說明 值
1

data-exclude-invisible

它定義是否在分配圓角時排除不可見的子元素。

 true | false
2

data-mini

它定義組應該顯示為較小尺寸還是常規尺寸。

 true | false
3

data-theme

它顯示 controlgroup 的主題顏色。

 字母 (a-z)
4

data-type

它指示組應該以水平還是垂直格式顯示。

 水平 | 垂直

對話方塊

下表列出了使用data-dialog="true" 屬性的對話方塊元素。

序號 資料屬性及說明 值
1

data-close-btn

它定義關閉按鈕的位置。

 左 | 右 | 無
2

data-close-btn-text

它定義關閉按鈕的文字。

 文字
3

data-corners

它定義對話方塊是否應該顯示圓角。

 true | false
4

data-dom-cache

它指示是否必須為各個頁面清除 DOM 快取。

 true | false
5

data-overlay-theme

它定義對話方塊頁面的疊加顏色。

 字母 (a-z)
6

data-theme

它定義對話方塊頁面的主題顏色。

 字母 (a-z)
7

data-title

它定義對話方塊頁面的標題。

 文字

增強功能

下表列出了使用data-enhance="false" 或 data-ajax = "false" 屬性的增強元素。

序號 資料屬性及說明 值
1

data-enhance

您可以透過將此屬性設定為“true”來設定頁面樣式。如果將其設定為“false”，則無法設定頁面樣式。

 true | false
2

data-ajax

它指示頁面是否必須從 Ajax 載入。

 true | false

固定工具欄

下表列出了使用data-position = "fixed" 屬性的工具欄元素。

序號 資料屬性及說明 值
1

data-disable-page-zoom

它定義使用者是否能夠縮放頁面。

 true | false
2

data-fullscreen

它定義工具欄必須位於頂部和/或底部。

 true | false
3

data-tap-toggle

它指示使用者是否可以透過點選切換工具欄可見性。

 true | false
4

data-transition

點選或單擊元素時，它會顯示過渡效果。

 滑動 | 淡入 | 無
5

data-update-page-padding

它使用調整大小、過渡和更新佈局事件來更新頁面的填充。

 true | false
6

data-visible-on-page-show

它定義父頁面顯示時的工具欄可見性。

 true | false

翻轉開關

下表列出了使用data-role = "flipswitch" 屬性的翻轉開關元素。

序號 資料屬性及說明 值
1

data-mini

它定義開關應該顯示為較小尺寸還是常規尺寸。

 true | false
2

data-on-text

它定義翻轉開關上的“開”文字。

 預設為“開”
3

data-off-text

它定義翻轉開關上的“關”文字。

 預設為“關”

頁尾

下表列出了使用data-role="footer" 屬性的頁尾元素。

序號 資料屬性及說明 值
1

data-id

它定義唯一的 ID。

 文字
2

data-position

它定義頁尾是否應位於底部或與頁面內容內聯。

 內聯 | 固定
3

data-fullscreen

它定義頁尾是否應位於底部並在頁面內容之上。

 true | false
4

data-theme

它定義頁尾的主題顏色。

 字母 (a-z)

頁首

下表列出了使用data-role = "header" 屬性的頁首元素。

序號 資料屬性及說明 值
1

data-id

它定義唯一的 ID。

 文字
2

data-position

它定義頁首是否應位於底部或與頁面內容內聯。

 內聯 | 固定
3

data-fullscreen

它定義頁首是否應位於底部並在頁面內容之上。

 true | false
4

data-theme

它定義頁首的主題顏色。

 字母 (a-z)

輸入

下表列出了使用type = "text|search|etc" 屬性的輸入元素。

序號 資料屬性及說明 值
1

data-clear-btn

它定義輸入元素是否應包含清除按鈕。

 true | false
2

data-clear-btn-text

它定義清除按鈕的文字。

 文字
3

data-mini

它定義輸入是否應該顯示為較小尺寸還是常規尺寸。

 true | false
4

data-role

它停止將輸入或文字區域樣式化為按鈕。

 無
5

data-theme

它定義輸入元素的主題顏色。

 字母 (a-z)

連結

下表列出了與 jQuery Mobile 一起使用的連結元素。

序號 資料屬性及說明 值
1

data-ajax

它指示頁面是否必須透過 Ajax 載入。

 true | false
2

data-direction

它用於反向過渡。

 反向
3

data-dom-cache

它指示 jQuery DOM 快取是否必須為頁面清除。

 true | false
4

data-prefetch

它用於將頁面預取到 DOM 中。

 true | false
5

data-rel

它指定連結的行為。

 後退 | 對話方塊 | 外部 | 彈出視窗
6

data-transition

它定義從一個頁面到另一個頁面的過渡。

 淡入 | 翻轉 | 流動 | 彈出 | 滑動 | 向下滑動 | 滑動淡入 | 向上滑動 | 翻頁 | 無
7

data-position-to

它定義彈出框的位置。

 原點 | jQuery 選擇器 | 視窗

列表

下表顯示了使用data-role = "listview" 屬性的列表元素。

序號 資料屬性及說明 值
1

data-autodividers

它自動劃分列表。

 true | false
2

data-count-theme

它定義計數元素的主題顏色。

 字母 (a-z)
3

data-divider-theme

它定義列表分隔符的主題顏色。

 字母 (a-z)
4

data-filter

它用於在搜尋框中過濾列表值。

 true | false
5

data-filter-placeholder

它定義搜尋框內的某些文字。

 文字
6

data-filter-theme

它定義搜尋過濾器的主題顏色。

 字母 (a-z)
7

data-icon

它為列表提供圖示。

 預設為無圖示
8

data-inset

它定義列表是否應顯示圓角和邊距。

 true | false
9

data-split-icon

它定義分割按鈕的圖示。

 預設圖示為“arrow-r”
10

data-split-theme

它定義分割按鈕的主題顏色。

 字母 (a-z)
11

data-theme

它定義列表的主題顏色。

 字母 (a-z)

列表項

下表顯示了使用data-role = "listview" 屬性的列表項元素。

序號 資料屬性及說明 值
1

data-filtertext

它用於使用搜索框中的文字過濾列表值。

 文字
2

data-icon

它為列表項提供圖示。

 預設為無圖示
3

data-role

它定義列表項的分隔符。

 list-divider
4

data-theme

它定義列表項的主題顏色。

 字母 (a-z)

導航欄

下表列出了使用data-role = "navbar" 屬性的導航欄元素。

序號 資料屬性及說明 值
1

data-icon

它為列表項提供圖示。

 預設為無圖示
2

data-iconpos

它定義圖示的位置。

 左 | 右 | 上 | 下 | 無文字

頁面

下表列出了使用data-role = "page" 屬性的頁面元素。

序號 資料屬性及說明 值
1

data-dom-cache

它指示是否必須為各個頁面清除 DOM 快取。

 true | false
2

data-overlay-theme

它定義對話方塊頁面的疊加顏色。

 字母 (a-z)
3

data-theme

它定義頁面的主題顏色。

 字母 (a-z)
4

data-title

它為頁面提供標題。

 預設為無圖示
5

data-url

它用於更新 URL。

 url

彈出視窗

下表列出了使用data-role = "popup" 屬性的彈出視窗元素。

序號 資料屬性及說明 值
1

data-corners

它定義彈出視窗是否應顯示圓角和邊距。

 true | false
2

data-dismissible

它定義是否可以透過單擊外部關閉彈出視窗。

 true | false
3

data-history

它定義開啟時彈出視窗是否應顯示專案的歷史記錄。

 true | false
4

data-overlay-theme

它定義彈出框的疊加顏色。

 字母 (a-z)
5

data-shadow

它為彈出框顯示陰影。

 true | false
6

data-theme

它定義彈出框的主題顏色。

 字母 (a-z)
7

data-tolerance

它定義視窗的邊緣。

 30, 15, 30, 15

單選按鈕

下表列出了使用type = "radio" 屬性的單選按鈕元素。

序號 資料屬性及說明 值
1

data-mini

它定義按鈕應該顯示為較小尺寸還是常規尺寸。

 true | false
2

data-role

它停止將單選按鈕樣式化為增強的按鈕。

 無
3

data-theme

它定義單選按鈕的主題顏色。

 字母 (a-z)

選擇

下表列出了與 jQuery Mobile 一起使用的選擇元素。

序號 資料屬性及說明 值
1

data-icon

它為選擇元素提供圖示。

 預設為“arrow-d”
2

data-iconpos

它定義圖示的位置。

 left | right | top | bottom
3

data-inline

它定義按鈕是否應該內聯顯示。

 true | false
4

data-mini

它定義選擇是否應該顯示為較小尺寸還是常規尺寸。

 true | false
5

data-native-menu

當它設定為 false 時，它使用自定義選單。

 true | false
6

data-overlay-theme

它定義自定義選擇選單的疊加顏色。

 字母 (a-z)
7

data-placeholder

它用於設定非原生選擇的選項元素。

 true | false
8

data-role

它停止將選擇元素樣式化為按鈕。

 無
9

data-theme

它顯示選擇元素的主題顏色。

 字母 (a-z)

滑塊

下表列出了使用type = "range" 屬性的滑塊元素。

序號 資料屬性及說明 值
1

data-highlight

它突出顯示滑塊。

 true | false
2

data-mini

它定義滑塊是否應該顯示為較小尺寸還是常規尺寸。

 true | false
3

data-role

它停止將滑塊控制元件樣式化為按鈕。

 無
4

data-theme

它顯示滑塊控制元件的主題顏色。

 字母 (a-z)
5

data-track-theme

它顯示滑塊軌道的主題顏色。

 字母 (a-z)
列印頁面
上一頁
下一頁
廣告