HTML5与JQuery.Mobile（三）_html5jqmobileheader中格式-CSDN博客

实现内容的展开与收缩部分代码：

  <!--	这是一个展开和收缩的集合		-->
    <div data-role="collapsible-set">
  <!--	展开/收缩对象		-->
      <div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="d">
          <h4>aaa</h4>
          <h4>aaa</h4>
          <h4>aaa</h4>
          <h4>aaa</h4>
          <h4>aaa</h4>
      </div>
      <div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="d">
          <h4>aaa</h4>
          <h4>aaa</h4>
          <h4>aaa</h4>
          <h4>aaa</h4>
          <h4>aaa</h4>
      </div>
    </div>

实现表格布局排版的例子：

<!--	ui-grid-a代表2行,b代表3行，一直到d代表5行	-->
    <div class="ui-grid-a">
      <div class="ui-block-a"><strong>Grid content on left</strong>this is more left content</div>
      <div class="ui-block-b"><strong>Grid content on right</strong>this is more right content</div>
    </div>
    
    <!-- 设置并排的工具条样式	-->
    <div class="ui-grid-a">
      <div class="ui-block-a">
        <div class="ui-bar ui-bar-a" style="height:120px"><strong>Grid content on left</strong>this is more left content</div>
      </div>
      <div class="ui-block-b">
        <div class="ui-bar ui-bar-e" style="height:120px"><strong>Grid content on right</strong>this is more right content</div>
      </div>
    </div>
    
    <!-- 设置按钮并排排列样式	-->
    <div class="ui-grid-a">
      <div class="ui-block-a">
        <button type="submit" data-theme="c">Submit Form</button>
      </div>
      <div class="ui-block-b">
        <button type="submit" data-theme="e">Upload photo</button>
      </div>
    </div>
    
    <!-- 设置三条并排的工具条样式	-->
    <div class="ui-grid-b">
      <div class="ui-block-a">
        <div class="ui-bar ui-bar-a" style="height:120px"><strong>Grid content on left</strong>this is more left content</div>
      </div>
      <div class="ui-block-b">
        <div class="ui-bar ui-bar-e" style="height:120px"><strong>Grid content on center</strong>this is more center content</div>
      </div>
      <div class="ui-block-c">
        <div class="ui-bar ui-bar-d" style="height:120px"><strong>Grid content on right</strong>this is more right content</div>
      </div>
    </div>
    
        <!-- 设置3条/2行并排的工具条样式	-->
    <div class="ui-grid-b">
      <div class="ui-block-a">
        <div class="ui-bar ui-bar-a" style="height:120px"><strong>Grid content on left</strong>this is more left content</div>
      </div>
      <div class="ui-block-b">
        <div class="ui-bar ui-bar-e" style="height:120px"><strong>Grid content on center</strong>this is more center content</div>
      </div>
      <div class="ui-block-c">
        <div class="ui-bar ui-bar-d" style="height:120px"><strong>Grid content on right</strong>this is more right content</div>
      </div>
            <div class="ui-block-a">
        <div class="ui-bar ui-bar-a" style="height:120px"><strong>Grid content on left</strong>this is more left content</div>
      </div>
      <div class="ui-block-b">
        <div class="ui-bar ui-bar-e" style="height:120px"><strong>Grid content on center</strong>this is more center content</div>
      </div>
      <div class="ui-block-c">
        <div class="ui-bar ui-bar-d" style="height:120px"><strong>Grid content on right</strong>this is more right content</div>
      </div>
    </div>

可以展开和收缩的工具栏的例子（包括多级展开和收缩）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css">
<script src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<!-- This is the Phone page. -->
<section data-role="page" data-dom-cache="true">
  <header data-role="header" data-position="inline"> <a href="#" data-icon="delete" class="ui-btn-right"> delete </a>
    <h1>Contact us</h1>
    <a href="#" data-icon="gear" class="ui-btn-left"> gear </a> </header>
  <div class="content" data-role="content">
    <div class="collapsible" data-role="collapsible"
				data-content-theme="e" data-theme="a" data-collapsed="false">
      <h3>Collapsible bar</h3>
<nav data-role="navbar"> <a href="#"> Phone </a> <a href="#">Email </a> <a href="#"> Fax </a> <a href="#"> Forum </a> <a href="#"> Help Form </a> <a href="#"> Help </a> </nav>
      </p>
    </div>
  </div>
  
  <!-- 多级的伸展和收缩效果	-->
  <div class="collapsible" data-role="collapsible"
				data-content-theme="e" data-theme="a">
    <h3>Collapsible bar</h3>
<nav data-role="navbar"> <a href="#" class="ui-btn-active"> Phone </a>
      <div class="collapsible" data-role="collapsible">
        <h3>collapsible caption</h3>
        <a href="#">Email </a> </div>
      <a href="#"> Fax </a> <a href="#"> Forum </a> <a href="#"> Help Form </a> <a href="#"> Help </a> </nav>
    </p>
  </div>
  <footer data-role="footer" data-position="fixed">
    <nav data-role="navbar">
      <ul>
        <li><a href="#"> Mainpage </a></li>
        <li><a href="#"> Map </a></li>
        <li><a href="#" class="ui-button-active ui-state-persist"> Contact </a></li>
      </ul>
    </nav>
  </footer>
</section>
</body>
</html>