[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity

スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。

vanity jquery toolset

[ad#ad-2]

vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。
機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。

以下、7つのツールとそのコードを紹介します。
※外部ファイル・スタイルシートは省略

スライダーのデモページ

div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。

HTML

<!-- the slider content holder -->
<div class="slider">
<!-- the elements inside the slider, have as many as you want -->
<div>
<a href="#">
<img src="slider_01.jpg" width="600" height="350" border="0" />
</a>
</div>
<!-- the navigation can be placed ANYWHERE in your document -->
<a href="#" class="next">&rarr;</a>
<a href="#" class="prev">&larr;</a>
</div><!-- slider -->

JavaScript

$(document).ready(function(){
    $(".slider").jSlider({elem:"div"});
    }); 

タブのデモページ

アニメーションで切り替わるタブコンテンツです。

HTML

<ul class="tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="clear"></div>
<div class="tabs_content">
<div>Sample 1 content</div>
<div>Sample 2 content</div>
<div>Samplest content for the 3rd tabSamplest content for the 3rd tab</div>
</div><!-- tabs content -->

JavaScript

$(document).ready(function(){
$("ul.tabs").jTabs({content: ".tabs_content"});
}); 

ページネーションのデモページ

長いコンテンツをページで区切ります。

HTML

<div id="content">
<p>1Lorem ipsum dolor sit amet, consectetur adipiscing ept.</p>
<p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet apquam urna laoreet.</p>
<p>Curabitur a ipsum ut ept porttitor egestas non vitae pbero.</p>
<p>Pellentesque ac sem ac sem tincidunt euismod.</p>
<p>2Duis hendrerit purus vitae nibh tincidunt bibendum.</p>
<p>Nullam in nisireet.</p>
<p>Nulla sed purus et tellus convalps scelerisque.</p>
<p>Nam at justo ut ante consectetur faucibus.</p>
<p>Proin dapibus nisi a quam interdum lobortis.</p>
<p>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</p>
<p>Mauris auctor suscipit tellus, at sodales nisi blandit sed.Lorem ipsum dolor sit abitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div> 

JavaScript

$(document).ready(function(){
$("#content").jPaginate();
}); 

スポットライトのデモページ

ホバー時にスポットライトをあてます。

HTML

<ul class="parent">
<li><img src="one.jpg" width="300" height="250" title="Such a pretty photo!" /></li>
<li><img src="two.jpg" width="300" height="250" title="Even prettier!" /></li>
<li><img src="three.jpg" width="300" height="250" title="Simpler and more information cna be handled here" /></li>
<li><img src="four.jpg" width="300" height="250" title="short" /></li>
</ul><!-- parent -->

JavaScript

$(document).ready(function(){
$(".parent").jSpotlight({title_effect: "slide"});
}); 

ツールチップのデモページ

ホバー時にツールチップを表示します。

HTML

<a href="#" class="tip" title="jTip And something longer will go here">Simple Tip</a>
<a href="#" class="tip" title="Something else in here!">Simple Tip 2</a>
<a href="#" class="tip" title="This is the greatest tip plugin EVER! Seriously :)">Longer text</a>

JavaScript

$(document).ready(function(){
$(".tip").jTip();
}); 

プレースフォルダのデモページ

HTML5のプレースフォルダ非対応ブラウザにもプレースフォルダを適用します。

HTML

<form method="get" action="#">
<input type="text" placeholder="something simple..." name="simple" class="placeholder" />
<input type="submit" />
</form>

JavaScript

$(document).ready(function(){
$("input:text").jPlaceholder({css_class: "placeholder"});
}); 

コラプスのデモページ

アニメーションでコンテンツを挿入・削除します。

HTML

<a href="#" class="collapse" rel="#collapsibleElement">Expand</a>
<div id="collapsibleElement">
Test Content Number 1
</div>

JavaScript

$(document).ready(function(){
    $(".collapse").jCollapse({effect: "fade"});
    });