jquery mobile 移動web(2)

標籤：

button 按鈕
　　data-role="button" 將超連結變成button。
　　具有icon 表徵圖的button 組件。
　　提供了18常用的表徵圖 data-icon =""
　　　　1.arrow-1左箭頭
　　　　2.arrow-r 右箭頭
　　　　3.arrow-u 上箭頭
　　　　4.arrow-d 下箭頭
　　　　5.delete 刪除
　　　　6.plus 加號
　　　　7.minus 減號
　　　　8.check 對號
　　　　9.gear 齒輪
　　　　10.refresh 重新整理
　　　　11.forward 前進
　　　　12.back 返回
　　　　13.grid 網格
　　　　14.stat 星星
　　　　15.alert 提示
　　　　16.info 資訊
　　　　17.home 首頁
　　　　18.search 尋找

　　表徵圖的位置
　　　　data-iconpos=""
　　　　　　left right top bottom
　　　　　　通過 設定 data-iconpos="notext" 可以建立一個沒有文字，只有icon 表徵圖的按鈕。
　　自訂表徵圖按鈕。
　　　　例如：data-icon="myapp-email" myapp-email 就是自訂的表徵圖名稱，根據規範編寫css 樣式 樣式名稱為.ui-icon-myapp-email 並在改樣式中把表徵圖設定為背景。
　　　　data-inline="" 屬性值為true button 按鈕的按鈕的寬度會自動適應按鈕常值內容和表徵圖組合的長度。
　　　　<a href="#" data-role="button" data-icon="home" data-inline="true">home</a>
　　　　具有分組功能的buttonn按鈕
　　　　　　在按鈕的最外層增加一個div 並設定 data-role 屬性值為 controlgroup。
　　　　　　　　<div data-role="controlgroup">
　　　　　　　　　　<a data-role="button"></a>
　　　　　　　　　　<a data-role="button"></a>

　　　　　　　　</div>

　　　　　　data-type="horizontal" 將垂直的按鈕變成水平分布。

　　　　　　data-rel="back" jQuery Mobile 會忽略a 元素的href屬性，並類比出類似瀏覽器後退按鈕。

多按鈕的Footer 工具列。
　　footer 工具列和header工具列在布局上有一些區別。在footer工具列中添加的按鈕會自動給哦設定成inline 模式，並自動適應常值內容的寬度。
　　實現一組按鈕的方法 在最外層設定一個div 設定data-role 屬性值為controlgroup 然後在設定data-type 屬性值為 horizontal,說明該按鈕時水平排列的。
　　導航條工具列。
　　<footer data-role="header">
　　　　<nav data-role="navbar">
　　　　<ul>
　　　　　　<li>
　　　　　　　　<a href="#" class="ui-btn-active" data-icon="home" data-iconpos="top">首頁</a>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<a href="#" data-icon="search" data-iconpos="top">尋找</a>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<a href="#" data-icon="info" data-iconpos="top">首頁</a>
　　　　　　</li>
　　　　</ul>
　　　　</nav>
　　</footer>

定義fixed 工具列
　　<header data-role="header" data-position="fixed">
　　　　<h1>固定位置工具列</h1>
　　</header>
　　全螢幕模式工具列
　　　　在整頁模式內的header 或footer 地區設定為 data-position 屬性值為fixed,然後在頁面或視圖的div 元素上設定data-fullscreen 屬性為true
　　　　頁面或試圖採用全螢幕模式。

　　內容地區格式布局。

網格布局。
　　代碼如下：
　　　　<div class="ui-grid-a">
　　　　　　<div class="ui-block-a">
　　　　　　　　<input type="reset" data-theme="c" value="reset">
　　　　　　</div>
　　　　　　<div class="ui-block-b">
　　　　　　　　<input type="reset" data-theme="b" value="submit">
　　　　　　</div>
　　　　</div>

　　ui-grid-a 兩列
　　ui-grid-b 三列
　　ui-grid-c 四列
　　ui-grid-d 五列

　　三列網格布局如下：
　　　　<div class="ui-grid-b">
　　　　　　<div class="ui-block-a">
　　　　　　　　<input type="reset" data-theme="a" value="a">
　　　　　　</div>
　　　　　　<div class="ui-block-b">
　　　　　　　　<input type="reset" data-theme="b" value="b">
　　　　　　</div>
　　　　　　<div class="ui-block-c">
　　　　　　　　<input type="reset" data-theme="c" value="c">
　　　　　　</div>
　　　　</div>
　　多列以此類推。

jquery mobile 移動web(2)