JQuerymobile執行個體原始碼

首頁我們先來解釋一下下JQuerymobile是什麼，jQuery Mobile是JQuery 架構的一個組件（而非jquery的移動版本）。jQuery Mobile是一款基於HTML5的使用者介面系統 是用於建立移動 Web 應用程式的前端開發架構，可以應用於智能手機與平板電腦，而且使用 HTML5 和 CSS3 最小的指令碼來布局網頁。

我們先一部分一部分講解，最後在為大家附上完整代碼。

 

1 滑出面板

我們再來解釋一下其中一些屬性的作用吧。

data-role="panel"屬性用來建立面板。
data-display 屬性來控制台的展示方式:
   ① overlay在內容上顯示面板
   ② push是同時"推動"面板和頁面。
   ③ reveal預設值，將頁面像投影片一樣從螢幕划出，將面板顯示出來。

 1 <div data-role="panel" id="revealPanel" data-display="reveal"> 2     <p>已打卡127天</p> 3     <a href="#"><img src="img/a.PNG">張三</a><br> 4     <span>☆☆☆☆☆</span><br> 5     <span>編輯個性簽名...</span> 6         <div class="message"> 7             <ul> 8                 <li>瞭解會員特權</li> 9                 <li>QQ錢包</li>10                 <li>個性裝扮</li>11                 <li>我的收藏</li>12                 <li>我的相簿</li>13                 <li>我的檔案</li>14                 <li>免流量特權</li>15             </ul>16         </div>17 </div>

 

2 元素的過濾

   data-position="right"讓面板出現在螢幕的右側
   data-inset="true"：列表樣式的圓角和邊緣。
   元素的 data-autodividers="true" 屬性設定可以根據字母順序排列的列表。
   data-role="listview"：列表視圖。
   
   你想過濾的元素必須使用 data-filter="true" 屬性。
   建立 <input> 元素並指定 id，元素上加上 data-type="search" 屬性。這樣就能建立基本的搜尋欄位。
   將 <input> 元素放置於一個表單中，表單 <form> 元素使用 "ui-filterable" 類 - 該類會調整搜尋欄位與過濾元素的外邊距。
   接著為過濾的元素添加 data-input 屬性。該值需要是 <input> 元素的 id。

 1 <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right"> 2                 <h2>我的通訊錄</h2> 3                 <form class="ui-filterable"> 4                     <input id="myFilter" data-type="search" placeholder="根據名稱搜尋.."> 5                 </form> 6                 <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true"> 7                     <li> 8                         <a href="#">張三</a> 9                     </li>10                     <li>11                         <a href="#">李四</a>12                     </li>13                     <li>14                         <a href="#">Albert</a>15                     </li>16                     <li>17                         <a href="#">Billy</a>18                     </li>19                     <li>20                         <a href="#">Bob</a>21                     </li>22                     <li>23                         <a href="#">Calvin</a>24                     </li>25                     <li>26                         <a href="#">Cameron</a>27                     </li>28