タブやページネーションを簡単に実装できる!超軽量のjQueryプラグイン「vanity」

モモコ


タブやページネーションを簡単に実装できる!超軽量のjQueryプラグイン「vanity」

お疲れ様です、ももこです。
今回はタブやツールチップ等、ちょっとした動きをつけるのに便利で超軽量なjQqueryプラグイン「vanity」をご紹介します。

jSlider – スライダー

スライダーのサンプル画像

ナビとページ遷移のついた基本的なスライダー、速度やイージングも調整がききます。

jTabs – タブ

タブのサンプル画像

コンテンツの切り替えによく使われるタブ。簡単にアニメーションがつけられるのが個人的に気に入りました!

jPaginate – ページネーション

ページネーションのサンプル画像

ブログで大活躍するページネーション、オプションを細かく設定すればイイ感じに使えそうです。

jSpotlight – スポットライト

スポットライトのサンプル画像

選択した要素以外を目立たせなくするスポットライト。タイトルが下からひょこっと出てくるのも良いですね!

他にも……

以下のツールを含め、7つの機能が使用できます。

jTip – ツールチップ
jPlaceholder – プレースホルダ
jCollapse – 要素を折り畳んで配置

使い方

vanityを使用する際はヘッダーにjQqueryと必要なファイルを読み込ませ、ドキュメントページに書かれた各スクリプトを書いてください。

ヘッダー例
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/vanity_full_0.3js"></script><script type="text/javascript">// <![CDATA[
      $(document).ready(function(){$(".slider").jSlider({elem:"div"});     });
// ]]></script>
ドキュメントページ

まとめ

ライセンスはGPLとMIT、IE7でも問題なく動いてくれました。
サイトのdownloadからダウンロード出来ます。
全ての機能が入ったminファイルが8KBと、とっても軽いのに驚きです!

少ないコードでアニメーションなどもしっかりつけられるので、上手く使えば作業時間の短縮になりそうです。

モモコ
この記事を書いた人
モモコ

デザイナー

関連記事