關於jQuery Mobile的一些使用說明

jQuery Mobile 導航欄，導航欄由一組水平排列的連接構成，一般位於頁眉或頁腳內部。默認地，導航欄中的連接會自動轉換爲按鈕（無需 data-role="button"）。請使用 data-role="navbar" 屬性來定義導航欄：

實例

<div data-role="header">

  <div data-role="navbar">

    <ul>

      <li><a href="#anylink">首頁</a></li>

      <li><a href="#anylink">頁面二</a></li>

      <li><a href="#anylink">搜索</a></li>

    </ul>

  </div>

</div>

　　按鈕的寬度，默認地，與其內容一致。使用無序列表來均等地劃分按鈕：一個按鈕佔據 100% 的寬度，兩個按鈕各分享 50% 的寬度，三個按鈕 33.3%，以此類推。不過，若是您在導航欄中規定了五個以上的按鈕，那麼它會彎折爲多行。

　　可摺疊的內容塊，可摺疊（Collapsibles）容許您隱藏或顯示內容 - 對於存儲部分信息頗有用。如需建立可摺疊的內容塊，請向某個容器分配 data-role="collapsible" 屬性。在容器（div）中，添加一個標題元素（h1-h6），其後是您須要擴展的任意 HTML 標記：

實例

<div data-role="collapsible">

  <h1>點擊我 - 我能夠摺疊！</h1>

  <p>我是可摺疊的內容。</p>

</div>

默認地，該內容是關閉的。如需在頁面加載時擴展內容，請使用 data-collapsed="false"：

實例

<div data-role="collapsible" data-collapsed="false">

  <h1>點擊我 - 我能夠摺疊！</h1>

  <p>如今我默認是展開的。</p>

</div>

嵌套的可摺疊塊，能夠嵌套可摺疊內容塊：

實例

<div data-role="collapsible">

  <h1>點擊我 - 我能夠摺疊！</h1>

  <p>我是被展開的內容。</p>

  <div data-role="collapsible">

    <h1>點擊我 - 我是嵌套的可摺疊塊！</h1>

    <p>我是嵌套的可摺疊塊中被展開的內容。</p>

  </div>

</div>

可摺疊集合，可摺疊集合（Collapsible sets）指的是被組合在一塊兒的可摺疊塊（常被稱爲手風琴）。當新塊被打開時，全部其餘塊會關閉。建立若干內容塊，而後經過 data-role="collapsible-set" 用新容器包裝這個可摺疊塊：

實例

<div data-role="collapsible-set">

  <div data-role="collapsible">

    <h1>點擊我 - 我能夠摺疊！</h1>

    <p>我是被展開的內容。</p>

  </div>

  <div data-role="collapsible">

    <h1>點擊我 - 我能夠摺疊！</h1>

    <p>我是被展開的內容。</p>

  </div>

</div>

jQuery Mobile 文本輸入，輸入字段是經過標準的 HTML 元素編寫的，jQuery Mobile 會爲它們設置專門針對移動設備的美觀易用的樣式。您還能夠使用新的 HTML5 <input> 類型：

實例

<form method="post" action="demoform.asp">

  <div data-role="fieldcontain">

    <label for="fullname">全名：</label>

    <input type="text" name="fullname" id="fullname">

    <label for="bday">生日：</label>

    <input type="date" name="bday" id="bday">

    <label for="email">電郵：</label>

    <input type="email" name="email" id="email" placeholder="您的郵件地址..">

  </div>

</form>

文本框，請使用 <textarea> 來實現多行文本輸入。註釋：文本框會自動擴大，以適應您輸入的文本行。

實例

<form method="post" action="demoform.asp">

  <div data-role="fieldcontain">

    <label for="info">Additional Information:</label>

    <textarea name="addinfo" id="info"></textarea>

  </div>

</form>

搜索框，輸入類型 type="search" 是 HTML5 中的新類型，用於定義供輸入搜索詞的文本字段：

實例

<form method="post" action="demoform.asp">

  <div data-role="fieldcontain">

    <label for="search">Search:</label>

    <input type="search" name="search" id="search">

  </div>

</form>

複選框，當用戶選擇有限數量選項中的一個或多個選項時，會用到複選框：

實例

<form method="post" action="demoform.asp">

  <fieldset data-role="controlgroup">

    <legend>Choose as many favorite colors as you'd like:</legend>

      <label for="red">Red</label>

      <input type="checkbox" name="favcolor" id="red" value="red">

      <label for="green">Green</label>

      <input type="checkbox" name="favcolor" id="green" value="green">

      <label for="blue">Blue</label>

      <input type="checkbox" name="favcolor" id="blue" value="blue">

  </fieldset>

</form>