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="">状态</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>
<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

内容区域格式布局

网格布局
两列网格布局
<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>