jQuery Mobile 工具欄
工具欄元素通常位於頭部和尾部內- 讓導航易於訪問:
頭部欄
頭部欄一般包含頁面標題/logo 或一兩個按鈕(通常是首頁、選項或搜索)。
您可以添加按鈕到頭部的左側或右側。
下面的代碼,將添加一個按鈕到頭部標題文本的左側,添加一個按鈕到頭部標題文本的右側:
實例
<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主頁</a>
<h1>歡迎訪問我的主頁</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
</div>
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主頁</a>
<h1>歡迎訪問我的主頁</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
</div>
嘗試一下»
下面的代碼,將添加一個按鈕到頭部標題文本的左側:
實例
<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">主頁</a>
<h1>歡迎訪問我的主頁</h1>
</div>
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">主頁</a>
<h1>歡迎訪問我的主頁</h1>
</div>
嘗試一下»
但是,如果您把按鈕鏈接放置在<h1> 元素之後,將無法顯示右側的文本。 要添加一個按鈕到頭部標題的右側,請指定class 為"ui-btn-right":
實例
<div data-role="header">
<h1>歡迎訪問我的主頁</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">搜索</a>
</div>
<h1>歡迎訪問我的主頁</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">搜索</a>
</div>
嘗試一下»
頭部可以包含一個或兩個按鈕,而尾部沒有限制。 |
尾部欄
尾部欄比頭部欄更靈活- 在整個頁面中它們更具功能性和可變性,因此可以包含盡可能多的按鈕:
實例
<div data-role="footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上關注我</a>
</div>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上關注我</a>
</div>
嘗試一下»
注意:尾部的樣式與頭部不同(沒有內邊距和空間,且按鈕不居中)。 我們可以使用簡單的樣式來解決這個問題:
您還可以將尾部中的按鈕進行水平或垂直組合:
實例
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上關注我</a>
</div>
</div>
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上關注我</a>
</div>
</div>
嘗試一下»
定位頭部欄和尾部欄
頭部和尾部可以通過三種方式進行定位:
- Inline - 默認。 頭部欄和尾部欄與頁面內容內聯。
- Fixed - 頭部欄和尾部欄固定在頁面的頂部和底部。
- Fullscreen - 與Fixed 定位模式基本相同,頭部欄和尾部欄固定在頁面的頂部和底部。 但是當他工具欄滾動出屏幕之外時,不會自動重新顯示,除非點擊屏幕,這對於圖片或視頻類有提升代入感的應用是非常有用的。 注意這種模式下工具欄會遮住頁面內容,所以最好用在比較特殊的場合下。
使用data-position 屬性來定位頭部欄和尾部欄:
Inline 定位(默認)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer" data-position="inline" ></div>
<div data-role="footer" data-position="inline" ></div>
嘗試一下»
Fixed 定位
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer" data-position="fixed" ></div>
<div data-role="footer" data-position="fixed" ></div>
嘗試一下»
要啟用全屏定位,請使用data-position="fixed",並添加data-fullscreen 屬性到元素:
Fullscreen 定位
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true" ></div>
嘗試一下»
提示:全屏定位適用於照片、圖像和視頻。
提示:固定定位和全屏定位中,通過點擊屏幕將隱藏和顯示頭部欄和尾部欄。
更多實例
在工具欄上只顯示圖標
在工具欄上只顯示圖標可以使用ui-btn-icon-notext 類。