lider : ラベル付き横スライダー - jQuery simple plugins
目次
- jQuery simple plugins
- lider : ラベル付き横スライダー
- ipop : ドラッグ可能なポップアップウインドウ
lider
ラベル付き横スライダーを実現するjQueryプラグインです。このような動作をするプラグインではEvo Sliderが有名ですが、シンプルで改造しやすいものが欲しかったので自作しました。
全て合わせて50行以下のシンプルなプラグインです。
以下にサンプルを示します。ラベル部分をクリックすると横にスライドします。
ダウンロード
lider.zipプラグインを使うのに必要なファイルはlider.jsのみです。
sample/sample1.htmlが最もシンプルなサンプルです。
使い方
1. まず各ページとそれらを囲むタグを書きまず。
<div id="container">
<div>ページ１の内容</div>
<div>ページ２の内容</div>
<div>ページ３の内容</div>
</div>
2. head内でプラグインを読み込みます。
<script src="lider.js"></script>
3. 各ページを囲んだ要素に対してプラグインを割り当てます。
$('#container').lider();
オプション
| オプション名 | 説明 | デフォルト値 |
|---|---|---|
| labelWidth | ラベルの幅(px) | 40 |
| firstPage | 最初に表示するページ | 1 |
| duration | アニメーションの速度(ms) | 400 |
| easing | イージングの種類 | 'swing' |
ソース
lider.js
(function($) {
$.fn.lider = function(options) {
return this.each(function() {
var setting = $.extend({
labelWidth: 40,
firstPage: 1,
duration: 400,
easing: 'swing'
}, options);
var showPage = setting['firstPage'] - 1;
var container = $(this);
var pages = container.children();
var pageNum = pages.length;
var labelWidth = setting['labelWidth'];
var anim = function(p, l) {
pages.eq(p).animate({left: l}, setting['duration'], setting['easing']);
}
container.css({
position: 'relative',
overflow: 'hidden'
});
pages.each(function(page, elem) {
var left = page * labelWidth;
if (page > showPage) left += container.width() - pageNum * labelWidth;
$(elem).css({
position: 'absolute',
top: 0,
left: left,
width: container.width() - labelWidth * (pageNum - 1),
height: container.height()
}).click(function() {
if (showPage < page) {
for (var p = showPage + 1; p <= page; p++) {
anim(p, p * labelWidth);
}
} else if (page < showPage) {
for (var p = showPage; p > page; p--) {
anim(p, container.width() - (pageNum - p) * labelWidth);
}
}
showPage = page;
});
});
});
}
})(jQuery);
ツイート
そっか0