UI培訓之Jquery Mobile 學習筆記（三）

5、頁面間的過渡效果： data-transition
 
 
data-direction="reverse"   反轉過渡效果
 


 
對話框
<!-- 這個鏈接指向一個外部頁面，將顯示為對話框 -->
<a href="./confirmation.html" data-rel="dialog"> 刪除此項 </a>
打電話


<a href="tel:+1800229933"> 免費呼叫我們！ </a>
視頻及VoIP呼叫
<a href="facetime:101010"> 用 Facetime 呼叫我 </a>
發(fā)消息


<a href="sms:+1800229933?body=Hello!" data-role="button">
帶正文的短消息
</a>
發(fā)郵件
 
<a href="mailto:info@mobilexweb.com?subject=Sent%20from%20the%20web" data-role="button">

 
 
 
工具欄定位
   
 固定   
     data-position="fixed"
 全屏   
    只需在工具欄上定義 data-position="fixed" 并在當前頁面 （ data-role 屬性值為 page 的元素）上定義 data-fullscreen="true" 。
 真實固定    
    $.mobile.touchOverflowEnabled = true;
 
強制指定按鈕的位置
可以使用 CSS 類：
class="ui-btn-right" 或 class="ui-btn-left" 。
 
 設置按鈕圖標
 data-icon="gear"       
 
導航菜單：
            
<div data-role="navbar">
    <ul>
        <li><a href="#">文件</a></li>
        <li><a href="#">編輯</a></li>
        <li><a href="#">視圖</a></li>

    </ul>
</div>
     將一個導航欄作為 Web 應用的主導航時，最好將主頁作為第一個元素
    同時最好在 第一個 a 元素上加上 class="ui-btn-active" 以便將它標記為已選中
 
可以折疊內容
data-role='collapsible'    
data-collapsed="false"   默認折疊：否  
 
可以使用 data-theme 來改變這個可折疊面板的色樣。還可以 指定額外的 data-content-theme 屬性，這個屬性只影響內容
手風琴效果
 一 個 帶 有 data- role="collapsible-set" 的容器以及一組作為子元素的可折疊面板，這樣一次只有一個面板可見
<div data-role="collapsible-set">
    <div data-role="collapsible">
        <h2>凌晨時分</h2>
        <p>
凌晨時分
</p>
    </div>
    <div data-role="collapsible" data-collapsed="false">  //可折疊內容
<h2>告訴記者</h2> //必須有標題
<p>
1月5日當天晚上
</p>
    </div>
</div>

本文版權歸傳智播客UI培訓學院所有，歡迎轉載，轉載請注明作者出處。謝謝！
作者：傳智播客UI培訓學院
首發(fā)：http://fskzgqt.cn/ui