Bar工具欄
jqm提供了兩種標準類型的工具欄：
Headers bar充當視圖頁面的標題作用蔑赘，位于一個頁面或者視圖的頂部式矫，屬于該頁面或者視圖的第一個元素乡摹，通常包含一個標題和兩個按鈕（分別在標題兩側）
Footer bar 位于頁面或者視圖底部，屬于其最后一個元素采转；內容和功能相比于Headers bar更廣泛，除了包含文本和按鈕外，還允許放置導航條故慈、表單元素如選擇菜單等
- Headers bar
添加后退按鈕：
<header data-role="header">
<a data-rel="back">back</a>
<h1>后退視圖標題</h1>
</header> - 多按鈕的footer工具欄
在footer工具欄中添加的按鈕會被自動設置成inline模式板熊，并自適應文本寬度
<footer data-role="footer">
<a href="" data-role="button" data-icon="delete">del</a>
<a href="" data-role="button" data-icon="plus">add</a>
<a href="" data-role="button" data-icon="home">home</a>
<a href="" data-role="button" data-icon="arrow-u">up</a>
<h1>頁腳</h1>
</footer>
在footer元素上設置class樣式屬性為“ui-bar”，會使頁面更美觀察绷。 - 導航條工具欄組件：navbar
一般導航工具欄位于header或者footer工具欄內
<footer data-role="footer">
<nav data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">照片</a></li>
<li><a href="#" class="">狀態(tài)</a></li>
<li><a href="#" class="">狀態(tài)</a></li>
<li><a href="#" class="">信息</a></li>
<li><a href="#" class="">信息</a></li>
<li><a href="#" class="">評論</a></li>
<li><a href="#" class="">評論</a></li>
</ul>
</nav>
</footer>
Paste_Image.png
添加圖標和位置
<footer data-role="footer">
<nav data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="home" data-iconpos="top">首頁</a></li>
<li><a href="#" class="" data-icon="search" data-iconpos="top">查找</a></li>
<li><a href="#" class="" data-icon="info" data-iconpos="top">信息</a></li>
</ul>
</nav>
</footer>
- 固定頁頭或頁尾
<header data-role="header" data-position="fixed">頁頭</header>
<article data-role="content">
這是內容頁
</article>
<footer data-role="footer" data-position="fixed">
</footer>
Paste_Image.png
內容區(qū)域格式布局
- 網格布局
兩列網格布局
<article data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">a block content</div>
<div class="ui-block-b">b block content</div>
<div class="ui-block-a">
<input type="reset" data-theme="c" value="reset" name="">
</div>
<div class="ui-block-b">
<input type="submit" data-theme="b" value="submit" name="">
</div>
</div>
</article>
Paste_Image.png
多列布局干签，目前支持最多5列：ui-grid-d
- 折疊塊功能
<article data-role="content">
<div data-role="collapsible-set">
<section data-role="collapsible">
<h3>sssssssssaaaaass</h3>
<h3>sssssssssaaaaass</h3>
</section>
<section data-role="collapsible">
<h3>sssssdddssssss</h3>
<h3>sssssdddssssss</h3>
</section>
<section data-role="collapsible">
<h3>ssssssssdfsfsssss</h3>
<h3>ssssssssdfsfsssss</h3>
</section>
</div>
<div data-role="collapsible">
<h3>aaaaaaaa</h3>
<h3>aaaaaaaa</h3>
<h3>aaaaaaaa</h3>
<h3>aaaaaaaa</h3>
</div>
</article>
Paste_Image.png
