HTML5与JQuery.Mobile（三）

来源：互联网发布：自学java看什么书知乎编辑：程序博客网时间：2024/05/18 09:14

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

  <!--这是一个展开和收缩的集合-->    <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>