[JS]スライダーや通知パネルなど、CoffeeScriptで作成したjQueryのプラグイン集 -MiniJS

ウェブページでよく使用される、スライダー、通知パネル、ツールチップなどをCoffeeScriptで作成したjQueryのプラグインを紹介します。

サイトのキャプチャ

MiniJs
MiniJs -GitHub

MiniJsはフリーのオープンソースで、現在5種類(+1開発中)のプラグインがあります。

各デモと実装方法を簡単に紹介します。
※コードは最もシンプルな例で、各スクリプトで多数のオプションを備えています。

サイトのキャプチャ

Count

ワードやセンテンスをカウントしたり、マックス文字数の残りを表示し制限します。

HTML

<section id="example-1">
	<textarea autofocus="autofocus"></textarea>
</section>

JavaScript

$(function() {
	$('#example-1 textarea').miniCount();
});
サイトのキャプチャ

Tip

CSS3を使ったツールチップで、表示位置のカスタマイズ、アニメーションの併用もできます。

HTML

<span class="tip" title="Neque porro quisquam">
	hover me
</span>

JavaScript

$(function() {
	$('#example-1 .tip').miniTip();
});

サイトのキャプチャ

Slider

アニメーションでスライドする超シンプルなスライダーです。

<div id="slider">
	<figure>
		<img src="images/mini-slider-1.jpg" width="958" height="298" />
	</figure>
	<figure>
		...
	</figure>
</div>

JavaScript

$(function() {
	$('#slider').miniSlider();
});
サイトのキャプチャ

Notification

シンプルで、スタイルシートで簡単にデザイン変更できる通知パネルです。表示のエフェクト、不透明度、タイマーなどの機能もあります。

<div id="mini-notification">
	<p>The notification has been successfully displayed</p>
</div>

JavaScript

$(function() {
	$('#mini-notification').miniNotification({closeButton: true, closeButtonText: '[hide]'});
});
サイトのキャプチャ

Feed

TwitterのFeedを表示します。

<section id="example-1">
	<h2>Default</h2>
	<div class="mini-feed"></div>
</section>

JavaScript

$(function() {
	$('#example-1 .mini-feed').miniFeed();
});
サイトのキャプチャ

Alertはまもなく公開予定みたいです。

top of page

©2017 coliss