Yahoo! UI Library:: UI Controls :: Slider

http://developer.yahoo.net/yui/slider/index.html

＊本文中では、スライダーのつまみをスライダー・サムネイルと訳しています。スライダーと書いた場合、背景部分もしくは全体を指すので注意してください。

Yahoo! UI Library: Slider

The Slider component is a UI control that enables the user to adjust values in a finite range along one or two axes. Typically, the Slider Control is used in a web application as a rich, visual replacement for an input box that takes a number as input. The Slider component can also easily accommodate a second dimension, providing x,y output for a selection point chosen from a rectangular region.

This page describes the Slider component and provides examples of its use. It contains these sections:

Sliderコンポーネントを使うと、スライダーを使って値設定が可能になります。スライダーの値域は有限で、1つの軸または２つの軸を設けられます。スライダーコントローラは、数値入力ボックスの代わりに、リッチで視覚的なWEBアプリケーションとして使われることが多いです。Sliderコンポーネントは、X,Y次元にも簡単に適用できます。これをつかえば、長方形の領域からポイントを選択することも可能です。

以下、コンポーネントのサンプルと使い方を載せていきます。

Getting Started

コンポーネント間の依存関係に注意してください。

<!-- Namespace source file --> 
<script src = "http://yourwebsite.com/util/YAHOO.js" ></script>

<!-- Dependency source files --> 
<script src = "http://yourwebsite.com/util/dom.js" ></script>
<script src = "http://yourwebsite.com/util/event.js" ></script>
<script src = "http://yourwebsite.com/util/dragdrop.js" ></script>

<!-- Slider source file --> 
<script src = "http://yourwebsite.com/widget/slider.js" ></script> 

Sliderコンポーネントは YAHOO.widget.Slider. で定義されます

Basic HTML/CSS Setup

To create a slider you will need ID references to two page elements: one for the slider background and one for the thumb. The thumb should be a child of the background element.

<div id="sliderbg">
   <div id="sliderthumb"><img src="sliderthumbimg" /></div>
</div>

The elements can be styled as desired, but both elements should be positioned. Since the background area is clickable, the size of the elements matter. In typical implementations you will need to make the background width(for horizontal sliders) or height(for vertical sliders) the total number of pixels you want the slider to be able to move plus the width or height of the thumb element:

Here is a Slider layout example (Note: not to scale, and the dimensions are just an example, not a recommendation):

HTMLとCSSの準備の基本

スライダーを作るには、２つの要素へのIDリファレンスを必要とします。
１つ目はスライダーの背景となる要素、２つ目はサムネイルです。サムネイルは背景要素の子供（child node?)でなければいけません。

<div id="sliderbg">
   <div id="sliderthumb"><img src="sliderthumbimg" /></div>
</div>

２つの要素が勝手に希望どおりの配置になってくれるかもしれませんが、しっかりと位置づけておいた方がいいでしょう。背景の領域はクリック可能なので、要素のサイズが重要になってきます。水平軸のスライダーを作る場合は背景のwidthを、もしくは垂直軸のスライダーを作る場合はheightの値を、全体の幅（スライドさせる幅）＋サムネイル分の値を追加した値　にするのが一般的なやり方です。

背景のwidth(or height) = スライドする幅　+ サムネイル分の幅
＊下記の絵を参考にすると分かりやすいです

スライダーのレイアウトサンプルです。（注意：サンプル用の画像です。縮尺があってませんし、このようなスライダーを勧めるわけではありません）

Initializing the Slider

The following example creates a horizontal slider object.

var slider;
function sliderInit() {
   slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 200);
}

The getHorizSlider method produces a horizontal slider. The getVertSlider method produces a vertical slider. The full constructor for both looks like this:

YAHOO.widget.Slider.getHorizSlider(string bgid, string thumbid, int leftup, int rightdown, [int tick]) 

Where:

• bgid is the id of the slider background
• thumbid is the id of the slider thumb
• leftup is the number of pixels the slider can move left or up (depending on orientation)
• rightdown the number of pixels the slider can move right or down (depending on orientation)
• tick is the optional tick interval (see Setting up Tick Marks for more information)

The Slider component in the example above is created so that it can be moved 200 pixels to the right, and 0 pixels to the left. It is also possible to configure the slider thumb to start in the center of the background, which would make sense if your default landing zone or zero value is in the middle of the range.

See the additional topics below in Using Slider or under Examples for functional examples.

スライダーの初期化

水平なスライダー・オブジェクトを作るサンプルです。

var slider;
function sliderInit() {
   slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 200);
}

getHorizSlider()メソッドは水平なスライダーを作ります。
getVertSlider()メソッドは垂直なスライダーを作ります。両者ともコンストラクタは以下のようになります。

YAHOO.widget.Slider.getHorizSlider(string bgid, string thumbid, int leftup, int rightdown, [int tick]) 

• bgid　はスライダーの背景のIDです
• thumbid　は　スライダーサムネイル（ボタン？取っ手？）のIDです
• leftupは左方向、もしくは上方向に動かせるピクセル幅です
• righdown は右方向、もしくは下方向に動かせるピクセル幅です
• tickはチックの間隔です（ある一定の間隔をおいてスライドすること　詳しいことは後述）

サンプルのSliderコンポーネントは右方向に200px、左方向に0px動かせます。スライダー・サムネイルを背景の中心に設定することも可能です。この場合ゼロ点が値域の真ん中にあるような場合に意味をなします。

補足はサンプルを見てください。

Using Slider
This section describes customizations to the Slider.

1. Setting Up Tick Marks
2. Creating Slider Animation
3. Customizing Events

スライダーを使う

このセクションではスライダーのカスタマイズ方を載せています

1. チックの設定
2. スライダーのアニメーションをつくる
3. イベントのカスタマイズ

以上三つの項目の説明を書いていきます。

1.Setting Up Tick Marks

Sometimes you may want your slider to move in fixed pixel increments instead of pixel by pixel. The slider component supports this with an optional fifth parameter to the getHorizSlider and getVertSlider methods for the tick interval. The following will produce a vertical slider with tick positions every 20 pixels:

var slider;
   function sliderInit() {
   slider = YAHOO.widget.Slider.getVertSlider("sliderbg", "sliderthumb", 0, 200, 20);
}

When the background is clicked, or the thumb dragged, the slider automatically snaps to the nearest tick position.

1.チックの設定

一ピクセルずつ動かすのではなく、移動幅を固定して飛ばし飛ばしにスライダーを動かしたい時があるかもしれません。sliderコンポーネントは　getHorizSlider()とgetVertSlider()にチックをセットできるよう、五つめの追加パラメータをサポートします。次のサンプルは、20pxごとにチックをセットした垂直スライダーを作り出します。
（つまりスライダー・サムネイルが20pxごとに動く）

var slider;
   function sliderInit() {
   slider = YAHOO.widget.Slider.getVertSlider("sliderbg", "sliderthumb", 0, 200, 20);
}

＊数値の単位はpx

背景がクリックされるかスライダー・サムネイルがドラッグされると、スライダーは自動的に一番近いチックの位置を見つけて移動します

＊チックのイメージがわかない人は、Googleローカルの縮尺調整バーを思い出してください。

2.Creating Slider Animation

If you include the Yahoo! Animation component in your web page, the slider animates when its background is clicked. The animation is a smooth "ease-in" transition unless you define tick marks for the slider. In that case the slider snaps to all tick marks on its way to the final destination.

Animation may not be desirable in some implementations. Some slider animations, for example using an image as a CSS background image for the slider thumb, may cause performance issues for some browsers (notably IE). In the case of the thumb performance can be improved by using a slider image <img src="..."> rather than a CSS background on the slider HTML element.

If you prefer not to use animation, you can disable animation either by omitting the reference to the Animation class, or by turning it off explicitly:

var slider;
function sliderInit() {
   slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 100, 100);
   slider.animate = false;
}

2.スライダーのアニメーションをつくる

ページにYahoo!Animationコンポーネントを組み込んでいれば、背景がクリックされた時にスライダーがアニメーションします。スライダーにチックをセットしていないのなら、スムースな移動をする"ease-in"アニメーションになります。この場合、スライダーは終点まで全部のチック・マークをスナップします。

【ease-in サンプル】
http://developer.yahoo.net/yui/slider/examples/slider.html

アニメーションを使わない方がいい場合もあります。いくかのスライダー・アニメーションはブラウザに強い負荷をかけます。例えばCSSのbackground-imageを使ったスライダー・サムネイルを使ったような場合です。（ＩＥの場合は特に）このようなケースでは、HTML要素のCSS backgroundを使わないで、スライダーを画像&lt;img src="">するとパフォーマンスが改善されることがあります。

アニメーションが無い方がお好みでしたら、Animationクラスへの参照を省略するか、もしくは明示的に機能をオフにもできます。

var slider;
function sliderInit() {
   slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 100, 100);
　//明示的にアニメーション機能をオフとする
   slider.animate = false;
}

3.Customizing Events

The Slider component has an onChange event that is triggered when the slider thumb is moved. The onChange event provides the number of pixels the thumb has moved from the position it was in when the component was initialized.

var slider;
function sliderInit() {
   slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 100, 100);
   slider.onChange = displayNewValue;
}

function displayNewValue(offsetFromStart) {
   // determine the actual value from the offset
   var newVal = (offsetFromStart + myStartVal * myScale);
   alert(newVal);
}

イベントをカスタマイズする

SliderコンポーネントはonChangeイベントを用意しています。onChangeイベントはスライダー・サムネイルが動かされた時に発生します。onChangeイベントはスライダー・サムネイルが何ピクセル移動したかを教えてくれます。

var slider;
function sliderInit() {
   slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 100, 100);
   //onChangeイベントが起こると、displayNewValueが呼ばれる
   slider.onChange = displayNewValue;
}

function displayNewValue(offsetFromStart) {
   // 差分？を実数で代入
   var newVal = (offsetFromStart + myStartVal * myScale);
   alert(newVal);
}

＊displayNewValue()の中で使われてる変数がどこから出てきたものなのかイマイチ分かりません（・ω・｀）