jquerymobile-7 导航和多页面固定导航

在开发的过程中，我们经常会遇到在页面的底部有一排按钮，我们可以根据这些按钮切换页面，或者执行一些动作。在jquerymobile中我们可以在footer和header上添加这样的导航。下面看一个例子代码：

 








	

		
Home
		

		

			
Home
			
Credits
			
Contact
		
		
		
	
	
	

	

		This is the Home Page
	
	

	

		

			

				
Home
				
Credits
				
Contact
			
		
	
	

上述的代码中我们使用data-role="navbar"的div，这样jquerymobile会自动将div中li转换为相同的三个按钮。效果如下：

在使用一些手机应用的时候，在底部会有一个固定的导航或者叫做一组按钮，不会随着页面的切换而进行切换。使用jquerymobile我们也可以实现这样的效果，步骤如下：

1、在所有的页面中出现相同的footer

2、这些footer使用相同的data-id

3、在激活的页面对应的导航上添加两个class：ui-btn-active ui-state-persist

下面给出一个小例子：

 







	

	
a
	
	

	

		This is the a Page
	
	
	

		

			

				
a
				
b
			
		
	
	

在b.html中修改如下：

 







	

	
a
	
	

	

		This is the a Page
	
	
	

		

			

				
a
				
b
			
		
	
	

这样我们在这两个页面切换的时候，底部的导航栏至少在视觉上是感觉不出来动的，更深层次的我也没有研究。但是我猜测jquerymobile是固定了，然后在Dom中更新上面的内容，只是猜测没有根据。