5、頁面間的過渡效果: data-transition data-direction="reverse" 反轉(zhuǎn)過渡效果
對話框<!-- 這個鏈接指向一個外部頁面,將顯示為對話框 -->
<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" 并在當(dāng)前頁面 ( data-role 屬性值為 page 的元素)上定義 data-fullscreen="true" 。
真實固定 $.mobile.touchOverflowEnabled = true;
強制指定按鈕的位置可以使用 CSS 類:
class="ui-btn-right" 或 class="ui-btn-left" 。
設(shè)置按鈕圖標 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>
將一個導(dǎo)航欄作為 Web 應(yīng)用的主導(dǎo)航時,最好將主頁作為第一個元素
同時最好在 第一個 a 元素上加上 class="ui-btn-active" 以便將它標記為已選中
可以折疊內(nèi)容data-role='collapsible'
data-collapsed="false" 默認折疊:否
可以使用 data-theme 來改變這個可折疊面板的色樣。還可以 指定額外的 data-content-theme 屬性,這個屬性只影響內(nèi)容
手風(fēng)琴效果 一 個 帶 有 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"> //可折疊內(nèi)容
<h2>告訴記者</h2> //必須有標題
<p>
1月5日當(dāng)天晚上
</p>
</div>
</div>
本文版權(quán)歸黑馬程序員UI培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!作者:黑馬程序員UI培訓(xùn)學(xué)院首發(fā):http://m.409rqu1.cn/news/ui.html