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>

Paste_Image.png