jQuery Mobile 應用筆記

1．    頁面結構：
頭部依序加載
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
 
   頁面基礎代碼：
   <div data-role="page">  <!-- 頁面主體區塊 -->

      <div data-role="header">  <!-- 頭部區域 -->
        <h1>頁面頭部</h1>
      </div>
 
      <div data-role="content">  <!-- 頁面內容區域 -->
        <p>頁面內容</p>
      </div>
 
      <div data-role="footer">  <!-- 頁腳區域 -->
        <h4>頁腳</h4>
      </div>

</div>  <!-- 頁面主題區塊 -->

默認主題爲黑色
data-theme="a"
a：黑色
b：藍色
c：灰色
d：灰白色
e：金黃色

2．    頁面設置內連接錨點實現主體區塊切換
   <div data-role="page" id=」page1」>
      …….
      <a href=」# page2」>區域2</a>
      ……..
</div>
   <div data-role="page" id=」page1」>
      …….
      <a href=」# page1」>區域1</a>
      ……..
</div>


3．    外部頁面切換
<a href=」About.html」>個人介紹</a>  <!-- 當前頁面框架加載頁面 -->

<a href=」About.html」 rel="external">個人介紹</a> <!—脫離當前頁面框架，獨自打開頁面 -->

4．    返回上一頁連接、按鈕
<p> <a href="#" data-rel="back">返回首頁</a> </p>

<div data-role="page" data-add-back-btn="true" data-back-btn-text="返回按鈕文字">

5．    對話框
   <a href="./About.html" data-rel="dialog" data-transition="pop">對話框</a>
   <!-- 當前頁面框架加載對話框頁面 -->
   
對話框自身已有關閉按鈕，也可手動增長關閉按鈕
<a href="#" data-role="button" data-rel="back">關閉</a>
   
6．    頭部欄按鈕導航
   <div data-role="header" data-position="inline">
      <a href="#" data-add-back-btn="false" data-icon="arrow-l">上一頁</a>
      <h1>頁面頭部</h1>
      <a href="#page2" data-icon="arrow-r">下一頁</a>
   </div>
   
   按鈕連接可增長class="ui-btn-right" class="ui-btn-left" 進行左/右浮動定位

7．    導航欄   
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active">北京</a></li>
        <li><a href="#" data-icon="info">上海</a></li>
        <li><a href="#" data-icon="home">廣州</a></li>
        <li><a href="#">重慶</a></li>
      </ul>
</div>

8．    按鈕圖標
data-icon=""

左箭頭 data-icon="arrow-l"     右箭頭 data-icon="arrow-r"
上箭頭 data-icon="arrow-u"   下箭頭 data-icon="arrow-d"
刪除 data-icon="delete"         添加 data-icon="Plus"
減小 data-icon="minus"         檢查 data-icon="Check"
齒輪 data-icon="gear"           前進 data-icon="Forward"

後退 data-icon="Back"           網格 data-icon="Grid"
五角?data-icon="Star"           警告 data-icon="Alert"

信息 data-icon="info"            首頁 data-icon="home"
搜索 data-icon="Search"

9．導航欄自定義按鈕圖標位置
   <div data-role="navbar" data-iconpos="left">  <!-- "left" / "right" / "top" / "bottom" -->

10．頁腳尾部欄
    <div data-role="controlgroup" data-type="horizontal">
       <a href="#" data-role="button">公司主頁</a>
       <a href="#" data-role="button">聯繫咱們</a>
</div>

11．內容格式化
    <div class="ui-grid-a">
      <div class="ui-block-a">
        <div class="ui-bar ui-bar-c">A</div>
      </div>
      <div class="ui-block-b">
        <div class="ui-bar ui-bar-c">B</div>
      </div>
    </div>
    
12．摺疊區塊
    <div data-role="collapsible" data-collapsed="true">
        <h3>點擊查看更多</h3>  <!—標題在h1 – h6之間選擇 -->
        <p>一位優秀的Web端工程師，不只要有過硬的技術，並且要有執着、沉穩的品質。</p>
     </div>
摺疊區塊能夠嵌套使用
<div data-role="collapsible" data-collapsed="true">
        <h3>點擊查看更多</h3>  <!—標題在h1 – h6之間選擇 -->
        <p>第一層內容</p>
        <div data-role="collapsible" data-collapsed="true">
          <h3>點擊查看更多</h3>  <!—標題在h1 – h6之間選擇 -->
          <p>第二層內容</p>
          <div data-role="collapsible" data-collapsed="true">
            <h3>點擊查看更多</h3>  <!—標題在h1 – h6之間選擇 -->
             <p>第三層內容</p>
           </div>
        </div>
    </div>

    摺疊區塊能夠組合使用
<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="true">
        <h3>圖書</h3>
        <p><a href="#">文藝</a></p>
        <p><a href="#">少兒</a></p>
        <p><a href="#">社科</a></p>
</div>

<div data-role="collapsible" data-collapsed="true">
        <h3>音樂</h3>
        <p><a href="#">流行</a></p>
        <p><a href="#">民族</a></p>
        <p><a href="#">通俗</a></p>
</div>

<div data-role="collapsible" data-collapsed="true">
         <h3>影視</h3>
         <p><a href="#">歐美</a></p>
        <p><a href="#">懷舊</a></p>
        <p><a href="#">娛樂</a></p>
</div>

</div>

13．按鈕
① <a href="#" data-role="button" class="ui-btn-active">常規按鈕</a>
② <input type="button" value="肯定" /> <!-- jQuery Mobile自動渲染 -->

<a href="#" data-role="button" data-inline="true">常規按鈕</a>
<a href="#" data-role="button" data-inline="true">常規按鈕</a>  <!—同一行排列 -->

14．按鈕組
    <!-- 縱向排列 -->
    <div data-role="controlgroup">
      <a href="#" data-role="button" data-icon="check" class="ui-btn-active">肯定</a>
      <a href="#" data-role="button" data-icon="delete">取消</a>
</div>

<!—橫向排列 -->
<div data-role="controlgroup" data-type="horizontal">
   <a href="#" data-role="button" data-icon="check" class="ui-btn-active">肯定</a>
  <a href="#" data-role="button" data-icon="delete">取消</a>
</div>

15．文本框
    <!—根據文本框類型type 自動渲染 -->
    搜索：<input type="search" value="" />
    姓名：<input type="text" value="" />
年齡：<input type="number" value="0"/>

16．滑動塊
  <input type="text" id="age" />
<input type="range" id="txtR" value="0" min="0" max="50" onchange="$(‘#age’).val(this.value)" />

17．切換開關
    <select data-role="slider" onchange="if (this.value=='1') alert('開');else alert('關')">
          <option value="1">開</option>
        <option value="0">關</option>
    </select>

18．單選/複選按鈕組
    <fieldset data-role="controlgroup" data-type="horizontal">
       <input type="radio" name="rdoA" id="rdo1" value="1" checked="checked" />
         <label for="rdo1">A</label>
         <input type="radio" name="rdoA" id="rdo2" value="2" />
         <label for="rdo2">B</label>
         <input type="radio" name="rdoA" id="rdo3" value="3" />
         <label for="rdo3">C</label>
</fieldset>

19．選擇菜單
   <!-- data-type="horizontal" 橫向排列 -->
   <!-- data-native-menu="false" 渲染彈出框選項 -->
   <!-- multiple="true" 多項選擇 -->

<fieldset data-role="controlgroup" data-type="horizontal">
         <select name="selY" id="selY" data-native-menu="false">
            <option>年份</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
        <select name="selM" id="selM" data-native-menu="false" multiple="true">
            <option>月份</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
</fieldset>

20．列表：
    <ul data-role="listview">
      <li><a href="#">圖書</a></li>
      <li><a href="#">音樂</a></li>
    </ul>
    
    <li data-icon="false"> <!-- 可取消列表項中的箭頭 -->

    嵌套列表：
    <ul data-role="listview">
　    <li>
　      <h3>圖書</h3>
         <p>一本好書，就是一個良師益友。</p>
　　    <ul>
　　       <li><a href="#">計算機</a></li>
　　       <li><a href="#">社科</a></li>
　　    </ul>
　    </li>
　    <li>
　      <h3>音樂</h3>
         <p>好的音樂能夠陶冶人的情操。</p>
　　    <ul>
　　       <li><a href="#">流行</a></li>
　　       <li><a href="#">通俗</a></li>
　　    </ul>
　    </li>
    </ul>

    有序列表：
    <ol data-role="listview" start="5" type="a">
      <li><a href="#">計算機</a></li>
      <li><a href="#">文藝</a></li>
      <li><a href="#">社科</a></li>
    </ol>

21．懸浮方式固定頭部欄和尾部欄
<div data-role="header" data-position="fixed">
</div>

官網：http://jquerymobile.com/

中文API站點：http://www.jqmapi.com/