jquery mobile小案例

---恢復內容開始---

 【jquery mobile小案例】效果圖如下：

首先先創建一個頁面主要使用data-role="page"這個指令，我們給它起個id="pageone"

<div data-role="page" id="pageone" data-transition="slide" data-direction="reverse">
</div>

把下面的內容寫到這個DIV里面也就是pageone這個頁面里。

<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-role="page" 是在瀏覽器中顯示的頁面。
   data-transition="slide"頁面過渡效果。
   data-direction="reverse"頁面頁面從左向右滑動。不寫頁面從右向左滑動。
   data-role="panel"屬性來創建面板。
   data-display 屬性來控制面板的展示方式:
   ① overlay在內容上顯示面板
   ② push是同時"推動"面板和頁面。
   ③ reveal默認值，將頁面像幻燈片一樣從屏幕划出，將面板顯示出來。

 

 

<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>

上面一些指令的解釋：

   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="header">
                    <a href="#revealPanel" data-swipe-close="true" 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">
                
                <a href="#overlayPanel" class="ui-btn">搜索</a>
                
                <ul data-role="listview" data-inset="true">
                    <li>
                        <a href="#pagetwo" data-transition="slide" data-direction="reverse"><img src="img/a.PNG">張三(點擊跳轉頁面)</a>
                    </li>
                    <li>
                        <a href="#"><img src="img/b.PNG">李四</a>
                    </li>
                    <li>
                        <a href="#"><img src="img/c.PNG">王二</a>
                    </li>
                    <li id="listview1">
                        <a href="#"><img src="img/a.PNG">張五(向左滑動切換頁面)</a>
                    </li>
                </ul>
            </div>

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

<div id="footer" data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li>
                            <a href="#" data-icon="comment" onclick="goTo('content.html')">消息</a>
                        </li>
                        <li>
                            <a href="user.html" 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-fullscreen="true/false"規定工具欄是否一直固定在頂部或底部
   data-tap-toggle true | false 規定用戶是否能夠通過點擊改變工具欄的可見性
   如需創建一個可折疊的內容塊，需要為容器添加 data-role="collapsible" 屬性。
   默認情況下，內容是被折疊起來的。如需在頁面加載時展開內容，請使用 data-collapsed="false"
   data-role="collapsibleset"當一個新的塊被展開時，所有其他的塊都會被折疊起來。
   data-mini true | false 規定按鈕是小尺寸還是常規尺寸
   data-collapsed-icon="carat-r":定義折疊面板的圖標。

這樣pageone里面的內容都弄好了。下面我們在建一個data-role="page" id為pagetwo。

<div data-role="page" id="pagetwo" data-theme="b">
</div>

在pageteo里面下如下內容

<div data-role="header" data-position="fixed" data-fullscreen="true" >
                <h1>歡迎來到我的主頁</h1>
            </div>
              <div data-role="main" class="ui-content" >
            <a href="#pageone" data-transition="slide" data-direction="reverse">點擊跳轉頁面(淡入第一個頁面)</a>
          
               <div data-role="collapsibleset">
              <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
                      <h1>特別關心</h1>
                     <ul data-role="listview">
                      <li><a href="#">張三</a></li>
                      <li><a href="#">李四</a></li>
                      <li><a href="#">王二</a></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
                      <h1>分組一</h1>
                     <ul data-role="listview">
                      <li><a href="#">張三</a></li>
                      <li><a href="#">李四</a></li>
                      <li><a href="#">王二</a></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
                      <h1>分組二</h1>
                     <ul data-role="listview">
                      <li><a href="#">張三</a></li>
                      <li><a href="#">李四</a></li>
                      <li><a href="#">王二</a></li>
                    </ul>
                </div>
            </div>
        </div>
              
              <div data-role="footer" data-position="fixed" data-fullscreen="true">
                <h1>底部文本</h1>
              </div>
        </div> 
        
        
         <div data-role="page" id="class-page">  
  
            <div data-role="content">  
                <ul data-role="listview" id="listview2">  
                    <li>向右滑動切換頁面</li>  
                    <li>向右滑動切換頁面</li>  
                    <li>向右滑動切換頁面</li>  
                </ul>  
            </div>  
  
        </div

這樣一個小項目就完成了，趕快動起你的手敲一下試試吧！