WordPressで使いたいJAVAスクリプト「jQuery:Tabs」

tab

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: Suspended

関連記事:

Tags: , , ,

コメントする