[JS]スライダーや通知パネルなど、CoffeeScriptで作成したjQueryのプラグイン集 -MiniJS
Post on:2012年4月27日
ウェブページでよく使用される、スライダー、通知パネル、ツールチップなどをCoffeeScriptで作成したjQueryのプラグインを紹介します。
[ad#ad-2]
MiniJsはフリーのオープンソースで、現在5種類(+1開発中)のプラグインがあります。
各デモと実装方法を簡単に紹介します。
※コードは最もシンプルな例で、各スクリプトで多数のオプションを備えています。
ワードやセンテンスをカウントしたり、マックス文字数の残りを表示し制限します。
HTML
<section id="example-1"> <textarea autofocus="autofocus"></textarea> </section>
JavaScript
$(function() { $('#example-1 textarea').miniCount(); });
CSS3を使ったツールチップで、表示位置のカスタマイズ、アニメーションの併用もできます。
HTML
<span class="tip" title="Neque porro quisquam"> hover me </span>
JavaScript
$(function() { $('#example-1 .tip').miniTip(); });
[ad#ad-2]
アニメーションでスライドする超シンプルなスライダーです。
<div id="slider"> <figure> <img src="images/mini-slider-1.jpg" width="958" height="298" /> </figure> <figure> ... </figure> </div>
JavaScript
$(function() { $('#slider').miniSlider(); });
シンプルで、スタイルシートで簡単にデザイン変更できる通知パネルです。表示のエフェクト、不透明度、タイマーなどの機能もあります。
<div id="mini-notification"> <p>The notification has been successfully displayed</p> </div>
JavaScript
$(function() { $('#mini-notification').miniNotification({closeButton: true, closeButtonText: '[hide]'}); });
TwitterのFeedを表示します。
<section id="example-1"> <h2>Default</h2> <div class="mini-feed"></div> </section>
JavaScript
$(function() { $('#example-1 .mini-feed').miniFeed(); });
Alertはまもなく公開予定みたいです。
sponsors