jQueryでタブ表示をするためのプラグイン「Tabs」は、長～いページもスッキリまとまります。
とりあえず、どんな使い方を目指していたかといいますと、機能の違いを表示させたり、ソースの違いを表示させるなど、比較するのに効果があるのではないでしょうか。
サンプルでは、このプラグインのスクリプトを読み込み方法の記述を比較表示させています。
jQuery plugin: Tabs
サンプル
デフォルト
1 2 3 4 5 | <script type="text/javascript">
$(function() {
$('#tab > ul').tabs();
});
</script> |
フェードインエフェクト
1 2 3 4 5 | <script type="text/javascript">
$(function() {
$('#tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } });
});
</script> |
スライドエフェクト
1 2 3 4 5 | <script type="text/javascript">
$(function() {
$('#tab > ul').tabs({ fx: { height: 'toggle', duration: 'normal' } });
});
</script> |
フェード+スライドエフェクト
1 2 3 4 | <script type="text/javascript">
$(function() {
$('#tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'normal' } });
</script> |
どうでしょう。
きれいにまとまっているのではないかと思います。
Error: NotFound
関連記事:
- WordPressで使いたいJAVAスクリプト「jQuery:ToggleElements」
- WordPressで使いたいJAVAスクリプト「jQuery plugin:Treeview」
- WordPressプラグインではないJAVAスクリプトを導入するメモ
- WordPressで使いたいJAVAスクリプト「tablecloth」
- WordPressで使いたいJAVAスクリプト「 jQuery plugin:Sliding Boxes and Captions with jQuery」
Tags: JavaScriptライブラリ, jQuery, Tabs, WordPress