ポンクソフト

lider : ラベル付き横スライダー - jQuery simple plugins

前ページ jQuery simple plugins TOP 次ページ

目次

  1. jQuery simple plugins
  2. lider : ラベル付き横スライダー
  3. ipop : ドラッグ可能なポップアップウインドウ

lider

ラベル付き横スライダーを実現するjQueryプラグインです。
このような動作をするプラグインではEvo Sliderが有名ですが、シンプルで改造しやすいものが欲しかったので自作しました。
全て合わせて50行以下のシンプルなプラグインです。

以下にサンプルを示します。ラベル部分をクリックすると横にスライドします。

ダウンロード

lider.zip
プラグインを使うのに必要なファイルはlider.jsのみです。
sample/sample1.htmlが最もシンプルなサンプルです。

使い方

1. まず各ページとそれらを囲むタグを書きまず。
<div id="container">
  <div>ページ1の内容</div>
  <div>ページ2の内容</div>
  <div>ページ3の内容</div>
</div>
2. head内でプラグインを読み込みます。
<script src="lider.js"></script>
3. 各ページを囲んだ要素に対してプラグインを割り当てます。
$('#container').lider();

オプション

オプション名説明デフォルト値
labelWidthラベルの幅(px)40
firstPage最初に表示するページ1
durationアニメーションの速度(ms)400
easingイージングの種類'swing'
オプションの使い方の例はsample/sample2.htmlを参考にしてください。

ソース

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);
前ページ jQuery simple plugins TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0