ポンクソフト

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

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

お名前:


ataru
もぐらたたきに絵を入れるとしたら、どこを変えたらいいのですか?
2016/09/06 14:20



2016/09/04 21:30



2016/08/30 19:27

ページング作成中
シンプルだけど結構応用が効く!
2016/07/25 18:26

良く理解しましょう
$(function() {
$('input').click(function() {
if ($(this).val() == 3) alert('正解!');
else alert('はずれ!');
});
});

valの値が2番なら正解を表示と言う意味なので、3番目を正解にするなら

val() == 3)書き換えればいいです。

inputのところは関係ないです。
2016/03/07 15:52

教えてください
クイズゲームの作り方で、2問目、3問目を作っても絶対に
2番が正解になりますよね?

input要素を読み込んでいるので、全て同じ動作になると思うんですが、他の番号を正解にしたい場合どうしたら良いでしょうか?

また、inputにid行ってみましたが、うまく反応しませんでした。
2016/03/07 14:13

まほ
わかりやすく説明していただきありがとうございます!
ところで、
$.each(items, function(i, item) {
make().css(item.css).html(item.html);
});
の部分だけ今ひとつ理解ができなかったのですが
localStorage.stickyに値が入っているときに
①itemsという配列に JSON形式の文字列をjsのオブジェクトとして返し
②それぞれのitemsの要素に対してcss、htmlの要素の中身を入れている

という認識で良いでしょうか?

function(i,item)のところにiが入っていますが、これはどこに影響を与えているのでしょうか?

長々とすみませんがご回答いただければ嬉しいです!
2016/02/17 21:03

ぴよよ
↓ 目次8からHTMLのheadの部分の記述が・・・スミマセン
2016/02/06 01:34

ぴよよ
これまでスムーズにできたのですが、今回わからないです><;
2016/02/06 01:31

UT
わかりやすいですね!感謝します。
2016/01/26 10:02

残りを読む »