Slider の利用方法

Slider の利用方法

Posted at February 6,2007 12:50 AM
Tag:[JavaScript, Slider]

Ajax ライブラリとしてスライダーの API が色々と公開されていますが、それとは関係なく、1年近く前にみつけてエントリーしていなかったWebFXSlider を紹介したいと思います。

Value:

Slider は Mozzila 系ブラウザで動作しなかった、同サイトで公開されていた slidebar を新しく作り直したものです。
なお、WebFX は、国内ではグラフ描画の Chart Usage がブログ等で紹介されています。

1.機能

Slider は下記の機能があります。

  • スライダーを操作することにより、予め設定した最小値?最大値の値を取得
  • 予め設定したデフォルト値の位置にスライダーハンドルを固定
  • 値の途中変更が可能
  • スライド方向(縦・横)を指定可能

また

  • マウスサポート(ドラッグだけでなくクリックによる操作も可能)
  • キーボード操作のサポート(矢印キーやPageUp/PageDown による操作が可能)
  • ホイール操作のサポート(IEのみ)
  • CSSによるスキン変更(Demoのページでサンプルを見ることができます)

と、スライダーとしては結構良い仕上がりです。

2.ダウンロード・インストール

Slider の一番下にある「Download」をクリック。ダウンロードしたアーカイブを解凍し、中にある slider というフォルダを index.html のディレクトリに丸ごとアップロードします。
動作に必要なのは下記です。

slider/css/bluecurve/*
slider/css/luna/*
slider/css/swing/*
slider/js/range.js
slider/js/slider.js
slider/js/timer.js

css ディレクトリは使用するスキン別に分けられています。例えば bluecurve を使用するのであれば luna / swing ディレクトリはアップロード不要です。

3.スライダーの表示

</head> の直前に下記を追加します。

<link type="text/css" rel="stylesheet" href="slider/css/bluecurve/bluecurve.css" />
<script type="text/javascript" src="slider/js/range.js"></script>
<script type="text/javascript" src="slider/js/timer.js"></script>
<script type="text/javascript" src="slider/js/slider.js"></script>

1行目はサンプルで用意されているスキンから「bluecurve」を利用した場合です。他に「winclassic」「luna」「swing」がありますのでお好きなデザインを選んでください(winclassic は winclassic.css ファイルのみ)。

スライダーを表示させたい位置に下記のタグを追加します。tabIndex 属性は TAB キーによる選択を可能にします。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>

上記タグのすぐ下に、下記のデバグ用タグ(青色)を表示させておくと良いでしょう(不要になったら削除します)。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>
<p>
Value: <input id="h-value" onchange="s.setValue(parseInt(this.value))"/>
Minimum: <input id="h-min" onchange="s.setMinimum(parseInt(this.value))"/>
Maximum: <input id="h-max" onchange="s.setMaximum(parseInt(this.value))"/>
</p>

4.script タグの追加

4.1 Horizontal (水平方向にスライド)の場合

2項で設定した位置より後方に下記の script タグを追加します。ここでは上記のデバグ用 input タグにスライダーの値を表示するだけのサンプルを示します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.onchange = function () {
 
    // デバグ用
    document.getElementById("h-value").value = s.getValue();
    document.getElementById("h-min").value = s.getMinimum();
    document.getElementById("h-max").value = s.getMaximum();
};
window.onresize = function () {
    s.recalculate();
};
</script>

4.2 vertical (垂直方向にスライド)の場合

4.1項のコンストラクタ(new ?の行)の第3パラメータに下記を追加します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"), "vertical");
    :

または次のように setOrientation を追加します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.setOrientation("vertical");
    :

5.各値の変更

下記の API を利用して値を変更します。

  • デフォルト値:setValue
  • 最大値:setMaximum
  • 最小値:setMinimum

以下、設定例です。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.setValue(10);
s.setMaximum(100);
s.setMinimum(0);
    :

6.API

Slider で提供されている各 API です(間違っていたらご指摘ください)。

Timer

setTimeout のオブジェクト指向カプセル化

getPauseTime:ポーズ時間(ms)取得
isStarted:タイマー開始可否を返却
setPauseTime:ポーズ時間(ms)設定
start:タイマー開始
stop:タイマー終了

Range

スライダー・スクロールバー・プログレスバーの動作で使用されるデータのモデル化。 Sun Java によって定義された javax.swing.BoundedRangeModel インタフェースの考えに基づいています

getMaximum:最大値を取得
getMinimum:最小値を取得
getValue:スライダーの値を取得
setMaximum:最大値を設定
setMinimum:最小値を設定
setValue:スライダーの値を設定

Slider

最大値?最小値の値を変えるためにハンドルをドラッグずるスライダーコントロール

getBlockIncrement:PageUp/PageDownキーの増減値を取得
getMaximum:最大値を取得
getMinimum:最小値を取得
getOrientation:スライダーの縦・横を取得
getUnitIncrement:矢印キーの増減値を取得
getValue:スライダーの値を取得
ontimer:タイマー設定
recalculate:*スライダーがリサイズされた後にこのAPIを使用
setBlockIncrement:PageUp/PageDownキーの増減値を設定
setMaximum:最大値を設定
setMinimum:最小値を設定
setOrientation:スライダーの縦・横を設定
setUnitIncrement:矢印キーの増減値を指定
setValue:スライダーの値を設定

7.スキン用 CSS

スキンは下記のセレクタで設定されています。

/* スライダー全体 */
.dynamic-slider-control {}
 
/* スライダー外側(horzontal用) */
.horizontal {}
 
/* スライダー外側(vertical用) */
.vertical {}
 
/* スライダー内側 */
.dynamic-slider-control input {}
 
/* ハンドル */
.dynamic-slider-control .handle {}
 
/* ハンドルの画像(horizontal用) */
.dynamic-slider-control.horizontal .handle {}
.dynamic-slider-control.horizontal .handle div {}
.dynamic-slider-control.horizontal .handle.hover {}
 
/* ハンドルの画像(vertical用) */
.dynamic-slider-control.vertical .handle {}
.dynamic-slider-control.vertical .handle.hover {}
 
/* スライダーバー */
.dynamic-slider-control .line {}
 
/* スライダーバー幅(vertical用) */
.dynamic-slider-control.vertical .line {}
 
/* スライダーバー幅(horizontal用) */
.dynamic-slider-control.horizontal .line {}
 
/* スライダーバーのドロップシャドウ */
.dynamic-slider-control .line div {}

2008.04.21
サンプルのマークアップを変更(IE6で表示できなかったため)

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

スライダーで動的に1行の文字数と文字サイズを変更・保存するスクリプト :実践1カラムテクニックス(1) from Liner Note
1カラムデザインをもっとユーザにとって使いやすくするにはどうすればいいかを提案するシリーズ。今回はスライダーを用いて動的に1行の文字数とフォントサイズを変... [続きを読む]

Tracked on August 10, 2007 4:52 PM

JavaScriptのスライダーで360度表示 from ポザスタ!
お姉チャンバラ Revolutionとうゲームがありまして... [続きを読む]

Tracked on February 23, 2008 7:08 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)