首頁 > web前端 > js教程 > 主體

JQuery Mobile實作導覽列和頁尾_jquery

WBOY
發布: 2016-05-16 15:11:16
原創
1289 人瀏覽過

導覽列由一組水平排列的連結構成,通常位於頁首或頁尾內部。

預設地,導覽列中的連結會自動轉換為按鈕(無需 data-role="button")。

導覽列部分的程式碼一般放置在data-role為header的div的內。

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1>欢迎访问我的主页</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</div>
登入後複製

一個基本的導覽列程式碼如上,包含兩個按鈕和一行文字作為標題。 data-icon可以定義按鈕對應的小圖示。如果希望將按鈕放在文字右側,可以加入class=「ui-btn-right」樣式。要注意的是,Jquery Mobile中的導航部分(header內)只能包含兩個按鈕。 (可以想像一下,一般的手機app導覽內都不會有過多的button,通常都放在頁腳)

相較之下,頁腳的按鈕數量沒有限制,頁腳放在footer中,基本程式碼如下:

<div data-role="footer"> 
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> 
</div>
登入後複製

這符合一般的行動app設計模式,底部是切換到不同頁面的button。切換頁面的方式也很簡單,注意到這裡的每一個button都是用a標籤定義的,其中的href就如我們上次所說,是可以進行頁面轉換的,只要在href後面添加另一個頁面的id(即data-role為page的div)即可完成跳轉。跳轉的過程有很多jquery mobile內建定義的動畫效果,以後再介紹。

關於頁首和頁尾,除了上述所說之外,還可以使用data-position屬性定義它們的位置屬性,包含以下三個可選值(來自:w2cschool):

Inline - 預設。頁首和頁尾與頁面內容位於行內。

Fixed – 頁首和頁尾會留在頁面頂部和底部。

Fullscreen - 與 fixed 類似;頁首和頁尾會留在頁面頂部和底部,but also over thepage content. It is also slightly see-through

關於jQuery mobile實作導覽列和頁腳的相關知識就給大家介紹到這裡,希望對大家有幫助!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!