jQuery Mobile基礎

一、安裝css

在<head></head>標籤裏邊寫入如下內容
jQuery Mobile CDN:
1 <head>
2     <meta charset="utf-8">
3     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
4     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
5     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
6 </head>

 下載的jQuery Mobile【下載地址:http://jquerymobile.com/download/ 】html

1 <head>
2     <link rel=stylesheet href=jquery.mobile-1.3.2.css>
3     <script src=jquery.js></script>
4     <script src=jquery.mobile-1.3.2.js></script>
5 </head>

 二、頁面jquery

由於在<div></div>標籤中已經區分了頁面,因此能夠在一個單獨的html文件中建立多個頁面了,經過惟一的id來分割每張頁面,並用href屬性來連接彼此。
1 data-role="page" 是顯示在瀏覽器中的頁面
2 data-role="header" 建立頁面上方的工具欄(經常使用於標題和搜索按鈕)
3 data-role="content" 定義頁面的內容,好比文本、圖像、表單和按鈕,等等
4 data-role="footer" 建立頁面底部的工具欄

 

三、過渡
過渡效果能夠設置頁面之間切換的效果,新版本的瀏覽器可能支持3D轉換效果
使用方式以下:
即在<a></a>標籤裏面添加一個data-transition屬性便可
<a href="#anylink" data-transition="slide">滑動到頁面二</a>
 
注:以上全部的效果同時支持反向動做,須要的添加     data-direction="reverse"     屬性便可
四、按鈕
建立按鈕的方法有如下幾種:
<button>按鈕</button>
<input type="button" value="按鈕">
<a href="#" data-role="button">按鈕</a>
 
按鈕的分類:
  • 導航按鈕
    • 默認顯示的按鈕,佔據屏幕的整個寬度
  • 行內按鈕
    • 添加屬性data-inline="true"便可
  • 組合按鈕
    • 添加屬性data-role="controlgroup" 與屬性 data-type="horizontal|vertical"便可
  • 後退按鈕
    • 添加屬性data-rel="back"
提示:jQuery Mobile 中的按鈕會自動得到樣式,這加強了他們在移動設備上的交互性和可用性。咱們推薦您使用 data-role="button" 的 <a> 元素來建立頁面之間的連接,而 <input> 或 <button> 元素用於表單提交。
默認狀況下,按鈕會佔據屏幕的所有寬度。若是您須要按鈕適應其內容,或者若是您須要兩個或多個按鈕並排顯示,請添加 data-inline="true":
其餘屬性:
【更多屬性見:http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp】
五、圖標
如需向您的按鈕添加圖標,請使用 data-icon 屬性:
下面咱們已列出 jQuery Mobile 提供的全部可用圖標:
圖標位置:
經過data-iconpos屬性能夠設置圖標的位置,圖標的默認位置是圖標靠左顯示的:
data-iconpos="top|right|bottom|left"
 
只顯示圖標
若是隻需顯示圖標,設置屬性"data-iconpos=notext"便可
 
六、工具欄
  • 標題欄
    • 頁眉一般會包含頁眉標題/LOGO 或一到兩個按鈕(一般是首頁、選項或搜索按鈕)
    • 若是隻設置一個按鈕的話,按鈕是不會顯示在標題的右側,要想顯示在標題的的右側,之須要設置class="ui-btn-right"屬性便可
  • 頁腳欄
    • 頁腳與頁眉的樣式不一樣(它會減去一些內邊距和空白,而且按鈕不會居中)。若是要修正該問題,請設置屬性class="ui-btn"便可
    • 也能夠在頁腳中選擇是水平仍是垂直的組合按鈕
  • 定位頁眉和頁腳
    • 放置頁眉和頁腳的方式有三種:
      • Inline - 默認。頁眉和頁腳與頁面內容位於行內。
      • Fixed - 頁面和頁腳會留在頁面頂部和底部。
      • Fullscreen - 與 fixed 相似;頁面和頁腳會留在頁面頂部和底部,but also over the page content. It is also slightly see-through
    • 請使用 data-position 屬性來定位頁眉和頁腳:
七、導航欄
導航默認的連接會自動轉換爲按鈕
1 <div data-role="header"> 
2   <div data-role="navbar">
3     <ul>
4       <li><a href="#anylink">首頁</a></li>
5       <li><a href="#anylink">頁面二</a></li>
6       <li><a href="#anylink">搜索</a></li>
7     </ul>
8   </div>
9 </div>

 

八、可摺疊
  • 可摺疊的內容塊
    • 你若是想建立可摺疊的內容塊,你須要向某個容器中設置data-role="collapsible" 屬性。在容器(div)中,添加一個標題元素(h1-h6),其後是您須要擴展的任意 HTML 標記:
      • 1 <div data-role="collapsible">
        2   <h1>點擊我 - 我能夠摺疊!</h1>
        3   <p>我是可摺疊的內容。</p>
        4 </div>
    • 默認地,該內容是關閉的。如需在頁面加載時擴展內容,請使用 data-collapsed="false":
  • 嵌套的可摺疊塊
    • 摺疊內容塊可根據本身的須要任意嵌套
  • 可摺疊集合
    • 可摺疊集合(Collapsible sets)指的是被組合在一塊兒的可摺疊塊(常被稱爲手風琴)。當新塊被打開時,全部其餘塊會關閉。
    • 建立若干內容塊,而後經過 data-role="collapsible-set" 用新容器包裝這個可摺疊塊:
    •  1 <div data-role="collapsible-set">
       2   <div data-role="collapsible">
       3     <h1>點擊我 - 我能夠摺疊!</h1>
       4     <p>我是被展開的內容。</p>
       5   </div>
       6   <div data-role="collapsible">
       7     <h1>點擊我 - 我能夠摺疊!</h1>
       8     <p>我是被展開的內容。</p>
       9   </div>
      10 </div>
相關文章
相關標籤/搜索