自動でタブ切り替えもできるjQueryプラグイン「Tabslet」!

2015/08/21

こんにちは。
今回は自動でタブ切り替えもできるjQueryプラグイン「Tabslet」!

自動でタブ切り替えを実装する時に、こちらのプラグインを使わせて頂いたので紹介したいと思います。

自動でタブ切り替えもできるjQueryプラグイン「Tabslet」!

Tabslet

tabslet

 

jQueryプラグイン「Tabslet」をダウンロードしてみよう!

Tabslet」のサイトの「DOWNLOAD」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「Tabslet」を設置してみよう!

html部分を記述します。

[html]

タブ1の中身
タブ2の中身
タブ3の中身

[/html]

 

jQuery本体とjquery.tabslet.min.jsを/bodyの手前に読み込みます。

[html]


[/html]

 

その下に下記のスクリプトを記述します。
これがデフォルトの状態になります。

[html]

[/html]

 

どのタブから始めるか設定できます。

[html]

[/html]

 

マウスオーバーで切り替える事ができます。

[html]

[/html]

 

アニメーションで切り替える事ができます。

[html]

[/html]

 

自動で切り替える事ができます。

[html]

[/html]

 

「previous」、「next」のボタンを付ける事ができます。

[html]

[/html]

 

切替時の前にイベントを設定する事ができます。

[html]

[/html]

 

切替時の後にイベントを設定する事ができます。

[html]

[/html]

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

タブにいろいろな機能を追加できるので便利ですね。
以上で自動でタブ切り替えもできるjQueryプラグイン「Tabslet」!

この記事を読んだ人はこんな記事も読んでいますよ

Topへ戻る