Route de développement mobile HTML5 de Xiaoqiang (37) - Démarrage rapide jqMobi

Dans "La route du développement mobile HTML5 de Xiaoqiang (33)——" Dans jqMobi Basics ", nous avons appris ce qu'est jqMobi et téléchargé le package de développement jqMobi depuis le site officiel. Après le téléchargement, le répertoire décompressé est le suivant :

Copiez le répertoire /css ci-dessus, le répertoire /plugins, le répertoire /ui, /appframework.js fichier, comme indiqué ci-dessous.

Vous pouvez également copier si index.html nécessaire, puis modifiez-le vous-même, comme mes index01.html et index02.html ci-dessus

puis introduisez les fichiers css et 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

 




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

    	

        	

            
            
            

                
           	
            

            	
首页
            
            

            	首页
                关于我们
            
        

    

La description du code ci-dessus :

1.

2. Zone de contenu

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

3. panneaux Le noyau de jqMobi peut avoir plusieurs

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

4. en-tête et pied de page

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

(1) En-tête et pied de page séparés pour chaque panneau

( 2) Commun L'en-tête et le pied de page peuvent être appelés dans plusieurs panneaux

<p id="afui">	
<p id="content">		
<p id="main" title="Welcome" class="panel" selected="true">		
<header>			
<h1>Welcome</h1>			
<a class="button" style="float:right;" class="icon home"></a>		
</header>		对应页面的内容		<footer>			
<a href=&#39;#about&#39; class=&#39;icon info&#39;>About</a>		
</footer>		
</p>	
</p>
</p>

(3) Une autre méthode

<p id="afui">	<p id="content">		
<p id="main" title="Welcome" class="panel" selected="true" data-footer="custom_footer"	data-header="custom_header">对应页面的内容</p>	
<header id="custom_header">			
<h1>Welcome</h1>			
<a class="button" style="float:right;" class="icon home"></a>		
</header>		
<footer id="custom_footer">			
<a href=&#39;#about&#39; class=&#39;icon info&#39;>About</a>		
</footer>	
</p>
</p>

<p id="header">
	<!-- any additional HTML you want can go here -->
	<a onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menu</a>
</p>
<p id="content">
	<!-- this is where your panels will go -->
	<p id="main" title="Welcome" class="panel" selected="true">
		内容
	</p>
	<p id="about" title="About" class="panel" data-nav="second_nav">
	<!-- by setting data-nav the "second_nav" will be shown on this panel -->
	</p>
</p>
	//底部
	<p id="navbar">
	<a target="#welcome" class="icon home">Home</a>
</p>

Effet de fonctionnement

Ce qui précède est le chemin de développement mobile HTML5 de Xiaoqiang (37) - contenu de démarrage rapide jqMobi, plus Pour le contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !