UI培訓(xùn)之Jquery Mobile 學(xué)習(xí)筆記（三）

5、頁(yè)面間的過(guò)渡效果： data-transition
 
 
data-direction="reverse"   反轉(zhuǎn)過(guò)渡效果
 


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


<a href="tel:+1800229933"> 免費(fèi)呼叫我們！ </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" 并在當(dāng)前頁(yè)面 （ data-role 屬性值為 page 的元素）上定義 data-fullscreen="true" 。
 真實(shí)固定    
    $.mobile.touchOverflowEnabled = true;
 
強(qiáng)制指定按鈕的位置
可以使用 CSS 類：
class="ui-btn-right" 或 class="ui-btn-left" 。
 
 設(shè)置按鈕圖標(biāo)
 data-icon="gear"       
 
導(dǎo)航菜單：
            
<div data-role="navbar">
    <ul>
        <li><a href="#">文件</a></li>
        <li><a href="#">編輯</a></li>
        <li><a href="#">視圖</a></li>

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

本文版權(quán)歸黑馬程序員UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：黑馬程序員UI培訓(xùn)學(xué)院
首發(fā)：http://3rdspacecomics.com/news/ui.html