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

ぶにゅーと伸びたり縮んだり動くJAVAスクリプトjQueryのプラグインたち。
とても大好きなんですが、このブログにも加えておきたいプラグインが今回ご紹介する「ToggleElements」です。
長い文章も章立てて表示させることが出来ますし、写真も差し込むことが出来ます。
まずは、いじってみてください。

jQuery plugin: ToggleElements

サンプル

【サンプル】ここでは、ニュースや各種情報を掲載するフロアとなっております。

デフォルト

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>

【サンプル】の中に更に入れ込むことも可能です。

【サンプル】の中に更に入れ込むことも可能です。

【サンプル】ここでは、ニュースや各種情報を掲載するフロアとなっております。

【サンプル】ここでは、ニュースや各種情報を掲載するフロアとなっております。

【サンプル】ここでは、ニュースや各種情報を掲載するフロアとなっております。

1
2
3
4
5
6
7
html, body, div,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

【サンプル】町内で生産された農水産物や特産品即売会をはじめ、美味しいものがいっぱい。また、ステージイベントやつかみどりコーナーも!

【サンプル】町内で生産された農水産物や特産品即売会をはじめ、美味しいものがいっぱい。また、ステージイベントやつかみどりコーナーも!

【サンプル】町内で生産された農水産物や特産品即売会をはじめ、美味しいものがいっぱい。また、ステージイベントやつかみどりコーナーも!

【サンプル】町内で生産された農水産物や特産品即売会をはじめ、美味しいものがいっぱい。また、ステージイベントやつかみどりコーナーも!

【サンプル】町内で生産された農水産物や特産品即売会をはじめ、美味しいものがいっぱい。また、ステージイベントやつかみどりコーナーも!

PhotoFunia-79f267

【サンプル】本サイトに掲載されている各種情報は、主催者及び公的機関が発信する情報等を基に作成もしくは、ユーザー様が任意で登録したものです。その他、情報の利用に際しては、『利用規約』をご確認ください。

【サンプル】本サイトに掲載されている各種情報は、主催者及び公的機関が発信する情報等を基に作成もしくは、ユーザー様が任意で登録したものです。その他、情報の利用に際しては、『利用規約』をご確認ください。

【サンプル】本サイトに掲載されている各種情報は、主催者及び公的機関が発信する情報等を基に作成もしくは、ユーザー様が任意で登録したものです。その他、情報の利用に際しては、『利用規約』をご確認ください。

【サンプル】本サイトに掲載されている各種情報は、主催者及び公的機関が発信する情報等を基に作成もしくは、ユーザー様が任意で登録したものです。その他、情報の利用に際しては、『利用規約』をご確認ください。

Error: Suspended

関連記事:

Tags: , , ,

One comment

  1. これいいですね。
    特にこのアイコン素材はデフォルトなんかよりずっといいし、cssでの工夫が見られます。

    何かに使えそうなので参考にさせてもらいます。ありがとー。

コメントする