小強的HTML5行動開發之路（37）－jqMobi快速入門

在《小強的HTML5行動開發之路（33）— jqMobi基礎》中我們了解了什麼是jqMobi，並從官方下載了jqMobi開發包，下載後解壓目錄如下：

/盤面🜎 /plugins目錄、/ui目錄、/appframework.js檔案,如下圖所示。

如果需要也可以複製檔案

<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>

index01.html

1、UI container

 




<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
 
 
	

    	

        	

            
            
            

                
           	
            

            	
首页
            
            

            	首页
                关于我们
            
        

    

2 、Content Area

<p id="afui">
这里面是写的内容
</p>

3、panels 是jqMobi的核心可以有多個

與

（1）每個panel單獨的header與footer

<p id="afui">	<p id="content">		<!-- this is where your panels will go -->		这里写的是 panel	</p>
</p>

（2）公用的header和footer可以在多個panel中呼叫

<p id="afui">	
<p id="content">		
<p id="main" title="Welcome" class="panel" selected="true">			在这个里面写我们的对应内容		</p>	
</p>
</p>

（3）另一種方法

運行效果

（ PHP中文網（www.php.cn）！