jquerymobile實例介紹

【創建頁面】
   data-role="page" 是在瀏覽器中顯示的頁面。。
   data-theme="b"更換主題，有a和b兩種
   data-role="header" 是在頁面頂部創建的工具條 (通常用於標題或者搜索按鈕)
    
    使用 ui-icon 類將圖標添加到按鈕上
    ui-btn-b 修改按鈕顏色為黑色，字體為白色(默認為灰色背景，黑色字體)。
    ui-corner-all 為按鈕添加圓角 
    ui-mini 制作小按鈕 
    ui-shadow 為按鈕添加陰影
    ui-icon-bars/ui-icon-plus:圖標樣式
    ui-btn-icon-notext只想顯示圖標
    默認情況下，所有圖標都是白色的。 如果需要改變圖標顏色為黑色，可以在元素添加 "ui-alt-icon"

<div data-role="page" id="pageone"  data-theme="b">
            <div data-role="header">
                <a href="#revealPanel"  class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
                    <!--<a href="#pushPanel" class="ui-btn ui-corner-all ui-icon-mail ui-btn-icon-notext"></a>-->
                <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
                <p align="center">消息</p>
            </div>

    data-role="main" 定義了頁面的內容，比如文本， 圖片，表單，按鈕等。
    "ui-content" 類用於在頁面添加內邊距和外邊距。
    列表視圖就是在在ul或ol標簽中添加data-role="listview"屬性。
    列表樣式的圓角和邊緣，使用 data-inset="true" 屬性設置

<div data-role="main" class="ui-content">
                <ul data-role="listview" data-split-icon="info" data-theme="b">
                    <li><a href=>
                      <img src="img/natalia0103151000057.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已經被消滅</p></a>
                      <a href="#popup"data-rel = "dialog"data-position-to="window" data-transition="pop">詳情</a>
                    </li>
                    <li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已經被消滅</p></a>
                      <a>詳情</a>
                    </li><li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已經被消滅</p></a>
                      <a>詳情</a>
                    </li><li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已經被消滅</p></a>
                      <a>詳情</a>
                    </li><li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已經被消滅</p></a>
                      <a>詳情</a>
                    </li><li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>談一場戀愛</h2>
                      <p>記綉榻閑時，並吹戲雨；雕闌曲處，同倚斜陽。</p></a>
                      <a>詳情</a>
                    </li>
                    <li><a href=>
                      <img src="img/natalia0103151000057.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已經被消滅</p></a>
                      <a href="#popup"data-rel = "dialog"data-position-to="window" data-transition="pop">詳情</a>
                    </li>
                </ul>
            </div>

    data-role="footer" 用於創建頁面底部工具條。
    使用 data-role="navbar" 屬性來定義導航欄
    使用 data-icon 屬性在導航按鈕上添加圖標
    在鏈接中添加data-rel="dialog"讓用戶點擊鏈接時彈出對話框

<div id="footer" data-role="footer" data-position="fixed">
                <!--
                    data-position="fixed" 固定在底部
                    data-fullscreen="true/false"規定工具欄是否一直固定在頂部或底部
                    data-tap-toggle    true | false    規定用戶是否能夠通過點擊改變工具欄的可見性
                -->
                <div data-role="navbar">
                    <ul>
                        <li>
                            <a href="#" data-icon="comment" onclick="goTo('content.html')">消息</a>
                        </li>
                        <li>
                            <a href="#overlayPanel" data-icon="user" onclick="goTo('content1.html')">聯系人</a>
                        </li>
                        <li>
                            <a href="#" data-icon="star" onclick="goTo('user.html')">動態</a>
                        </li>
                    </ul>
                </div>
            </div>

面板
     data-role="panel"屬性來創建面板。
     data-display 屬性來控制面板的展示方式:
     ① overlay在內容上顯示面板
     ② push是同時"推動"面板和頁面。
     ③ reveal默認值，將頁面像幻燈片一樣從屏幕划出，將面板顯示出來

<div data-role="panel" id="revealPanel" data-display="reveal">
                <p>已打卡127天</p>
                <a href="#"><img src="img/a.PNG">張三</a><br>
                <span>☆☆☆☆☆</span><br>
                <span>編輯個性簽名...</span>
                <div class="message">
                    <ul>
                        <li>了解會員特權</li>
                        <li>QQ錢包</li>
                        <li>個性裝扮</li>
                        <li>我的收藏</li>
                        <li>我的相冊</li>
                        <li>我的文件</li>
                        <li>免流量特權</li>
                    </ul>
                </div>
            </div>

【列表和過濾】
   data-position="right"讓面板出現在屏幕的右側
   data-inset="true"：列表樣式的圓角和邊緣。
   如果你有一個字母順序排列的列表，（例如一個電話簿）通過 <ol> 或者<ul>
   元素的 data-autodividers="true" 屬性設置可以配置為自動生成的項目的分隔。
   data-role="listview"：列表視圖。
   
   你想過濾的元素必須使用 data-filter="true" 屬性。
   創建 <input> 元素並指定 id，元素上加上 data-type="search" 屬性。這樣就能創建基本的搜索字段。
   將 <input> 元素放置於一個表單中，表單 <form> 元素使用 "ui-filterable" 類 - 該類會調整搜索字段與過濾元素的外邊距。
   接着為過濾的元素添加 data-input 屬性。該值需要是 <input> 元素的 id。

<div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right">
                <h2>我的通訊錄</h2>
                <form class="ui-filterable">
                    <input id="myFilter" data-type="search" placeholder="根據名稱搜索..">
                </form>
                <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
                    <li>
                        <a href="#">張三</a>
                    </li>
                    <li>
                        <a href="#">李四</a>
                    </li>
                    <li>
                        <a href="#">Albert</a>
                    </li>
                    <li>
                        <a href="#">Billy</a>
                    </li>
                    <li>
                        <a href="#">Bob</a>
                    </li>
                    <li>
                        <a href="#">Calvin</a>
                    </li>
                    <li>
                        <a href="#">Cameron</a>
                    </li>
                    <li>
                        <a href="#">Chloe</a>
                    </li>
                    <li>
                        <a href="#">Christina</a>
                    </li>
                    <li>
                        <a href="#">Diana</a>
                    </li>
                    <li>
                        <a href="#">Gabriel</a>
                    </li>
                    <li>
                        <a href="#">Glen</a>
                    </li>
                    <li>
                        <a href="#">Ralph</a>
                    </li>
                    <li>
                        <a href="#">Valarie</a>
                    </li>
                </ul>
            </div>
        </div>
<div data-role="page" id="popup">
      <div data-role="header">
       <h1>正在炸掉java</h1>
      </div>
      <div role="main" class="ui-content">
       <img src="img/natalia0103151000057.jpg"/>
       <p>java非常脆弱，已經被消滅</p>
      </div>
      <div data-role="footer">
       <h1>copyright © 2009-2014</h1> 
      </div>
  </div>