JQuery Mobile

按鈕可經過三種方法建立：

• 使用 <button> 元素
• 使用 <input> 元素
• 使用 data-role="button" 的 <a> 元素
•  data-role="button" 的 <a> 元素來建立頁面之間的連接，而 <input> 或 <button> 元素用於表單提交。

• 行內按鈕

  默認狀況下，按鈕會佔據屏幕的所有寬度。若是須要兩個或多個按鈕並排顯示，請添加 data-inline="true"

• 組合按鈕

  請將 data-role="controlgroup" 屬性與 data-type="horizontal|vertical" 一同使用，以規定水平或垂直地組合按鈕

• 後退按鈕

  使用 data-rel="back" 屬性:<a href="#" data-role="button" data-rel="back">返回</a>

• 定位圖標

  規定圖標被放置的位置：上、右、下或左。使用 data-iconpos 屬性:left,top,right,bottom

     若是隻需顯示圖標，請將 data-iconpos 設置爲 "notext"

  單獨向頁眉標題的某一側添加一個按鈕：class="ui-btn-right">

頁腳欄

與頁眉相比，頁腳更具伸縮性。頁腳與頁眉的樣式不一樣（它會減去一些內邊距和空白，而且按鈕不會居中）。若是要修正該問題，請在頁腳設置類名 "ui-btn"

定位頁眉和頁腳

使用 data-position 屬性：

• Inline - 默認。頁眉和頁腳與頁面內容位於行內。
• Fixed - 頁面和頁腳會留在頁面頂部和底部。
• Fullscreen - 與 fixed 相似;頁面和頁腳會留在頁面頂部和底部

導航欄

使用 data-role="navbar" 屬性。活動按鈕：使用 class="ui-btn-active"

爲每一個按鈕設置「被選」外觀，以表示用戶正在瀏覽該頁面。<li><a href="#anylink" class="ui-btn-active ui-state-persist">首頁</a></li>

可摺疊的內容塊

建立可摺疊的內容塊，向某個容器分配 data-role="collapsible" 屬性。在容器（div）中，添加一個標題元素（h1-h6）。如需在頁面加載時擴展內容，請使用 data-collapsed="false"

可摺疊集合

可摺疊集合（Collapsible sets）指的是被組合在一塊兒的可摺疊塊（常被稱爲手風琴）。

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>點擊我 - 我能夠摺疊！</h1>
    <p>我是被展開的內容。</p>
  </div>
  <div data-role="collapsible">
    <h1>點擊我 - 我能夠摺疊！</h1>
    <p>我是被展開的內容。</p>
  </div>
</div>

佈局網格

通常不推薦在移動設備上使用列布局，這是因爲移動設備的屏幕寬度所限。但當須要定位更小的元素，好比按鈕或導航欄時，列布局就恰如其分。

網格中的列是等寬的（總寬是 100%），無邊框、背景、外邊距或內邊距。

eg：對於 ui-grid-b 類（三列布局），請添加三個子元素 ui-block-a、ui-block-b 和 ui-block-c。

 列表視圖

建立列表，向 <ol> 或 <ul> 元素添加 data-role="listview"。爲列表添加圓角和外邊距，使用 data-inset="true" 屬性

列表分隔符：向 <li> 元素添加 data-role="list-divider" 屬性

列表是字母順序的（好比通信錄），自動添加恰當的分隔符：在 <ol> 或 <ul> 元素上設置 data-autodividers="true" 屬性

搜索過濾器

在列表中添加搜索框，請使用 data-filter="true" 屬性，修改默認文本，請使用 data-filter-placeholder 屬性

 列表縮略圖

對於大於 16x16px 的圖像，請在連接中添加 <img> 元素。

列表圖標

向 <img> 元素添加 class="ui-li-icon" 屬性

計數泡沫

計數泡沫用於顯示與列表項相關的數目，例如郵箱中的消息：使用行內元素，好比 <span>，設置 class "ui-li-count" 屬性並添加數字

表單結構

• <form> 元素必須設置 method 和 action 屬性
• 每一個表單元素必須設置惟一的 "id" 屬性。該 id 在站點的頁面中必須是惟一的。
• 每一個表單元素必須有一個標記（label）。請設置 label 的 for 屬性來匹配元素的 id。
• 隱藏 label，請使用類 ui-hidden-accessible
• 如需 label 和表單元素在寬屏幕上顯示正常，用 data-role="fieldcontain" 屬性的 <div> 或 <fieldset> 元素來包裝 label 或表單元素
• 如需避免 jQuery Mobile 自動爲可點擊元素設置樣式，請使用 data-role="none" 屬性

 文本輸入

使用 placeholder 來規定簡短的提示，以描述輸入字段的預期值：<input placeholder="sometext">

用 data-role="controlgroup" 屬性來組合按鈕；對單選框或複選框進行水平分組，用 data-type="horizontal" 屬性

 選擇菜單

 若是列表中包含了一長列相關的選項，請在 <select> 中使用 <optgroup> 元素

自定義選擇菜單

在全部移動設備上顯示一致外觀的選擇菜單，使用 自定義選擇菜單，data-native-menu="false" 屬性

 滑塊控件　　　

<input type="range" name="points" id="points" value="50" min="0" max="100">，突出顯示截止滑塊值的這段軌道，添加 data-highlight="true"

建立切換開關，使用 data-role="slider" 的 <select> 元素，並添加兩個 <option selected> /*設置爲預選（突出顯示）*/ 元素  （on,off）

jQuery Mobile 事件

• 觸摸事件 - 當用戶觸摸屏幕時觸發（敲擊和滑動）
• 滾動事件 - 當上下滾動時觸發
• 方向事件 - 當設備垂直或水平旋轉時觸發
• 頁面事件 - 當頁面被顯示、隱藏、建立、加載以及/或卸載時觸發
• jQuery on() 方法用於添加事件處理程序
• Touch 事件一樣適用於桌面電腦：點擊鼠標！
• tap 事件在用戶敲擊某個元素時觸發
• taphold 事件在用戶敲擊某個元素並保持一秒時被觸發
• swipe 事件在用戶在某個元素上水平滑動超過 30px 時被觸
• swipeleft 事件在用戶在某個元素上從左滑動超過 30px 時被觸發
• swiperight 事件在用戶在某個元素上從右滑動超過 30px 時被觸發
• scrollstart 事件在用戶開始滾動頁面時被觸發
• scrollstop 事件在用戶中止滾動頁面時被觸
• orientationchange 事件在用戶垂直或水平旋轉移動設備時被觸發,使用 orientationchange 事件，把它添加到 window 對象;callback 函數能夠設置一個參數，即 event 對象，它會返回移動設備的方向："portrait" （設備被握持的方向是垂直的）或 "landscape" （設備被握持的方向是水平的）：