PhoneGap中文网

标题: Jqmobi 入门教程 heade footer [打印本页]
作者: admin    时间: 2014-3-1 14:06
标题: Jqmobi 入门教程 heade footer
1 Jqmobi中 header footer的使用

  1. <b>1.panel中单独的header和footer</b>
  2. <div id="afui">
  3.    <div id="content">     
  4.       <div id="main" title="Welcome" class="panel" selected="true">
  5.             <header>
  6.               <h1>Welcome</h1>
  7.               <a class="button" style="float:right;" class="icon home"></a>
  8.             </header>
  9.             对应页面的内容
  10.            <footer>
  11.                <a href='#about' class='icon info'>About</a>
  12.            </footer>
  13.       </div>
  14.   </div>
  15. </div>
  16. <b>2. 公用的header和footer 可以在多个panel中调用</b>
  17. <div id="afui">
  18.    <div id="content">     
  19.       <div id="main" title="Welcome" class="panel" selected="true" data-footer="custom_footer"  data-header="custom_header">
  20.             对应页面的内容
  21.       </div>
  22.        <header id="custom_header">
  23.               <h1>Welcome</h1>
  24.               <a class="button" style="float:right;" class="icon home"></a>
  25.        </header>
  26.        <footer id="custom_footer">
  27.                <a href='#about' class='icon info'>About</a>
  28.        </footer>
  29.   </div>
  30. </div>

  32. <b>3.另一种定义头部底部的方法</b>
  33. //头部
  34.             <div id="header">
  35.                 <!-- any additional HTML you want can go here -->
  36.                 <a  onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menu</a>
  37.             </div>
  38.              <div id="content">
  39.                 <!-- this is where your panels will go -->
  40.                 <div id="main" title="Welcome" class="panel" selected="true">
  41. 内容         
  42.                 </div>               
  43.                  <div id="about" title="About" class="panel" data-nav="second_nav">
  44.                     <!-- by setting data-nav the "second_nav" will be shown on this panel -->
  45.                 </div>
  46.             </div>
  47. //底部
  48.             <div id="navbar">
  49.                <a target="#welcome" class="icon home">Home</a>
  50.             </div>
复制代码



作者: toget    时间: 2014-3-1 22:07
第二种怎么实现左右两个icon功能？
作者: 小雪    时间: 2014-3-4 17:27
不知该说些什么。。。。。。就是谢谢



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2