Jqmobi 入门教程 heade footer

admin

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>
    
31. 
    
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

第二种怎么实现左右两个icon功能？

小雪

不知该说些什么。。。。。。就是谢谢