テーマ:もう一つのjQueryのTabタブプラグイン、とても精緻です
プロジェクトアドレス:http://www.etmvc.cn/project/show/63
使用方法は、タブの各パネルのdivを準備するだけで、タブコンテナclass=「tabs-container」を設定すると、プラグインが自動的に変換されます.
Htmlコード
This is Tab1. This is Tab2 width close button. This is Tab3 width icon.
変換後の効果図は以下の通りです.
サイズ:11.3 KB 添付画像を表示
使用方法は、タブの各パネルのdivを準備するだけで、タブコンテナclass=「tabs-container」を設定すると、プラグインが自動的に変換されます.
Htmlコード
サブコンテンツ1
サブコンテンツ2
サブコンテンツ3
<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>
変換後の効果図は以下の通りです.
