ポンクソフト

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

このページに関するコメントをどうぞ

お名前:



あああああ
2017/01/20 17:43

カワカワ
ああああああああ
2017/01/16 08:48

fsfさ
dふぁfだs
2017/01/05 19:56

ああ
あああ
2016/11/09 18:25

test
サンプル
2016/11/08 16:42

セレクタの指定方法を返る
HTML部分
~~~~
<div>問題1</div>
<p>
<input type="radio" name="food" value="1">そば
<input type="radio" name="food" value="2">うどん
<input type="radio" name="food" value="3">ラーメン
</p>

<div>問題2</div>
<p>
<input type="radio" name="food01" value="1">いか
<input type="radio" name="food01" value="2">たこ
<input type="radio" name="food01" value="3">えび
<input type="radio" name="food01" value="4">えび
</p>
2016/11/08 14:31

セレクタの指定方法を返る
>教えてくださいさん
セレクタの指定方法をinputからnameに変える方法はいかがでしょうか。

//問題1
$(function() {
$("*[name=food]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});

//問題2
$(function() {
$("*[name=food01]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});
2016/11/08 14:31



2016/10/31 11:32


あいうえおテスト
2016/10/25 21:43

ああああ
いいいいいい
2016/10/20 11:05

残りを読む »