主题：另一个jQuery的Tab选项卡插件，很精致

项目地址：http://www.etmvc.cn/project/show/63

 

使用方法，只需准备选项卡的各个面板的div，设置选项卡容器class="tabs-container"，插件就会自动将其转换。

 

Html代码

1. <div id="tt" class="tabs-container" style="width:500px;height:150px;">  
2.     <div title="Tab1" style="padding:20px;display:none;"> This is Tab1.</div>  
3.     <div title="Tab2" closable="true" style="padding:20px;display:none;"> This is Tab2 width close button.</div>  
4.     <div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> This is Tab3 width icon.</div>  
5.     <div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">  
6.         <iframe scrolling="yes" frameborder="0"  src="http://www.google.com" style="width:100%;height:100%;"></iframe>  
7.     </div>  
8.     <div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">  
9.         <div class="tabs-container" style="height1:100px;width:100%;">  
10.             <div title="子标题1">子内容1</div>  
11.             <div title="子标题2">子内容2</div>  
12.             <div title="子标题3">子内容3</div>  
13.         </div>  
14.     </div>  
15. </div>  

	<div id="tt" class="tabs-container" style="width:500px;height:150px;">
		<div title="Tab1" style="padding:20px;display:none;"> This is Tab1.</div>
		<div title="Tab2" closable="true" style="padding:20px;display:none;"> This is Tab2 width close button.</div>
		<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> This is Tab3 width icon.</div>
		<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
			<iframe scrolling="yes" frameborder="0"  src="http://www.google.com" style="width:100%;height:100%;"></iframe>
		</div>
		<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
			<div class="tabs-container" style="height1:100px;width:100%;">
				<div title="子标题1">子内容1</div>
				<div title="子标题2">子内容2</div>
				<div title="子标题3">子内容3</div>
			</div>
		</div>
	</div>

转换后的效果图如下：

• 
• 大小: 11.3 KB

• 查看图片附件