jquery-ui标签页组件（tabs）学习

1.默认效果

	
	
	
	
	
	
	
	
	


 

 

	

		
tab1 菜单
		
tab2 菜单
		
tab3 菜单
	
	

		
tab1 菜单的内容。。。
	
	

		
tab2 菜单的内容。。。
	
	

		
tab3 菜单的内容。。。
	

 

 
 
 

Default tab组件效果，方法很简单，没什么要说的，主要是注意id=tabs的div里面的结构，一定要符合例子的规范，否则会报错。

 

 

2.竖直效果

	
	
	
	
	
	
	
	
	
	


 

 

	

		
tab1 菜单
		
tab2 菜单
		
tab3 菜单
	
	

		
tab1 菜单的题头
		
tab1 菜单的内容。。。
	
	

		
tab2 菜单的题头
		
tab2 菜单的内容。。。
	
	

		
tab3 菜单的题头
		
tab3 菜单的内容。。。
	

 

 
 
 

竖直的tab标签页效果。

//把tab标签页竖直显示。其原理就是对ul，li的css样式做改变
	//我们可以参考例子所带的css，效果还可以。

 

3.可拖拽效果

	
	
	
	
	
	
	
	
	
	
	


 

 

	

		
tab1 菜单
		
tab2 菜单
		
tab3 菜单
	
	

		
tab1 菜单的内容。。。
	
	

		
tab2 菜单的内容。。。
	
	

		
tab3 菜单的内容。。。
	

 

 
 
 

可以拖拽的tab标签页效果。

实现很简单，在tabs()方法后添加
.find( ".ui-tabs-nav" ).sortable({ axis: "x" });
就可以。


 

4.可折叠效果

	
	
	
	
	
	
	
	
	


 

 

	

		
tab1 菜单
		
tab2 菜单
		
tab3 菜单
	
	

		
tab1 菜单的题头
		
tab1 菜单的内容。。。
	
	

		
tab2 菜单的题头
		
tab3 菜单的内容。。。
	
	

		
tab3 菜单的题头
		
tab3 菜单的内容。。。
	

 

 
 
 

可折叠的tab标签页效果。点击同一个tab页，点击一次打开，再点击一次就折叠
$( "#tabs" ).tabs({
			collapsible: true
		});