jQuery Mobile 學習隨筆

一、鏈接切換（page-page，html-html）

1）是否通過AJAX加載頁面（默認爲true）：data-ajax="true/fasle"

2）反轉過渡動畫：data-direction="reverse"

例：<a href="#dialog" data-transition="slide" data-direction="reserse" >從左向右滑（與slide相反）</a>

3）設置目標頁面爲對話框：data-rel="dialog"

例：<a href="#dialog" data-rel="dialog">轉到dialog，目標頁面顯示爲dialog。</a>

4）設置返回上一頁：data-rel="back"

例：<a href="javascript:void(0);" data-rel="back" ><img src="../img/backbutton.png"></a>

5）HTML轉另一HTML時，添加：data-rel="external"

例：<a href="test.html" rel="external">轉另一HTML</a>

二、button設置

1）設置button（默認爲屏幕寬度）：data-role="button" 

2）設置button寬度符合文本內容：data-inline="true" 

3）取消button圓角：data-corners="false"

例：<a href="#pageone" data-role="button" data-inline="true" data-corners="false" >同文本寬的直角按鈕</a>

4）取消陰影：data-shadow="false"

5）mini尺寸：data-inline="true"

例：<a href="#pageone" data-role="button" data-shadow="false" data-mini="true" >無陰影的mini按鈕</a>

6）選中樣式：class="ui-btn-active"，保持選中狀態：ui-state-persist

例：<a href="#" class="ui-btn-active ui-state-persist“>保持選中狀態</a>

三、分組（鏈接button/單選/複選/菜單）

1）分組：data-role="controlgroup"

例：<div data-role="controlgroup" data-type="vertical" >
      <a href="#" data-role="button">按鈕 1</a>
      <a href="#" data-role="button">按鈕 2</a>
    </div>

2）在分組的基礎上添加。垂直（默認）：data-type="vertical"；水平：data-type="horizontal" 

例：<div data-role="controlgroup" data-type="horizontal">
      <a href="#" data-role="button">按鈕 1</a>
      <a href="#" data-role="button">按鈕 2</a>
    </div>

四、button圖標及圖標位置

1）圖標：data-icon="?"

<a href="#" data-role="button" data-icon="arrow-l">左箭頭圖標</a>
<a href="#" data-role="button" data-icon="arrow-r">右箭頭圖標</a>
<a href="#" data-role="button" data-icon="arrow-u">上箭頭圖標</a>
<a href="#" data-role="button" data-icon="arrow-d">下箭頭圖標</a>
<a href="#" data-role="button" data-icon="plus"">加號圖標</a>
<a href="#" data-role="button" data-icon="minus">減號圖標</a>
<a href="#" data-role="button" data-icon="delete">刪除圖標</a>
<a href="#" data-role="button" data-icon="check">檢查圖標</a>
<a href="#" data-role="button" data-icon="home">首頁圖標</a>
<a href="#" data-role="button" data-icon="info">信息圖標</a>
<a href="#" data-role="button" data-icon="back">後退圖標</a>
<a href="#" data-role="button" data-icon="forward">向前圖標</a>
<a href="#" data-role="button" data-icon="refresh">刷新圖標</a>
<a href="#" data-role="button" data-icon="grid">網格圖標</a>
<a href="#" data-role="button" data-icon="gear">齒輪圖標</a>
<a href="#" data-role="button" data-icon="search">搜索圖標</a>
<a href="#" data-role="button" data-icon="star">星形圖標</a>
<a href="#" data-role="button" data-icon="alert">提醒圖標</a>

2）圖標位置爲：左：data-iconpos="left" ，右：data-iconpos="right" ，上：data-iconpos="top" ，下：data-iconpos="bottom" ，無文字：data-iconpos="notext"

五、header和footer

1）不固定（默認）：data-position="inline"

2）固定（點擊內容消失）：data-position="fixed"

3）固定（點擊內容不消失）：data-position="fixed" data-tap-toggle="false"

3）覆蓋內容：data-position="fixed" data-fullscreen="true"

六、navbar導航欄

1）添加navbar：data-role="navbar"

2）導航欄中添加按鈕分組

七、可摺疊效果（默認摺疊，可嵌套）

1）可摺疊效果（必須要有標題標籤）：data-role="collapsible"

2）取消默認摺疊：data-collapsed="false"

例：<div data-role="collapsible" data-collapsed="false">
      <h1>點我摺疊！標題標籤必須有！</h1>
      <p>可摺疊的內容。</p>
      <div data-role="collapsible" data-collapsed="false">
        <h1>點我摺疊！標題標籤必須有！</h1>
        <p>可摺疊的內容。</p>
      </div>
    </div>

3）摺疊組：data-role="collapsible-set"

4）標題標籤去除圓角（默認爲圓角）：data-inset="false"

例：<div data-role="collapsible-set" data-inset="false">
      <div data-role="collapsible">
        <h3>點擊我 - 我是可摺疊的！</h3>
        <p>我是可摺疊的內容。</p>
      </div>
      <div data-role="collapsible">
        <h3>點擊我 - 我是可摺疊的！</h3>
        <p>我是可摺疊的內容。</p>
      </div>
      <div data-role="collapsible">
        <h3>點擊我 - 我是可摺疊的！</h3>
        <p>可摺疊的內容。</p>
      </div>
    </div>

5）摺疊/展開圖標：data-collapsed-icon="?" data-expanded-icon="?"

例：<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
      <h1>data-collapsed-icon 規定按鈕的圖標。</h1>
      <p>data-expanded-icon 規定內容被展開時按鈕的圖標。</p>
    </div>

6）摺疊列表：

例：<div data-role="collapsible">
      <h1>A</h1>
      <ul data-role="listview">
        <li><a href="#">A1</a></li>
        <li><a href="#">A2</a></li>
      </ul>
    </div>
    <div data-role="collapsible">
      <h1>B</h1>
      <ul data-role="listview">
        <li><a href="#">B1</a></li>
        <li><a href="#">B2</a></li>
      </ul>
    </div>

7）摺疊表單：

例：<form method="post" action="submit_form">
      <fieldset data-role="collapsible">
        <legend>點擊我 - 我可以摺疊！</legend>
          <p>喜愛的顏色：</p>
        <div data-role="controlgroup">
          <label for="red">紅色</label>
          <input type="checkbox" name="favcolor" id="red" value="red">
          <label for="green">綠色</label>
          <input type="checkbox" name="favcolor" id="green" value="green">
        </div>	
      <input type="submit" data-inline="true" value="提交">
      </fieldset>
    </form>