Yahoo! UI Library 3（YUI3）のウィジェット

Yahoo! UI Library Ver.3 を使ってみよう（7）

スライダー

　スライダーを表示するためのモジュールsliderの説明を行います。V3.0.0ではスキン（cssで書かれた外観表示指定）は1つのみでしたが、V3.1.0になって増えています。標準のスライダーを表示してみましょう。以下が例題起動時の画面です。

図2：例題起動時画面

　 以下のリスト3を見てください。

［リスト3］sliderの例題（WT_slider.html）

YUI().use("slider", function (Y) {
var xInput,yInput;
//水平スライダー
xInput = Y.one( "#Hvalue" );
var xslider= new Y.Slider({		//（1）
            axis: 'x',
            min   : 0,      // 最小値
            max   : 100,     // 最大値
            value : 0,       // 初期値
            length: '100px',  // 長さ
            after : {
                 valueChange: function(){
                 		xInput.set("value",xslider.getValue());
                 	}
                }
        });
    xslider.render( "#Hs" );		//（2）

//垂直スライダー
yInput = Y.one( "#Vvalue" );
var yslider=new Y.Slider({		//（3）
            axis: 'y',
            min   : 0,      // 最小値
            max   : -100,     // 最大値
            value : -0,       // 初期値
            length: '100px',  // 長さ
            after : {
                 valueChange: function(){
                 		yInput.set("value",yslider.getValue());
                 	}
                }
        });
     yslider.render( "#Vs" );		//（4）
});
</script>
</head>
<body class="yui3-skin-sam">
<h4>slider</h4><br>
<div id="demo">
    <h4>水平スライダー</h4>
    <p>Value: 
        <input id="Hvalue" value="0">
        <span id="Hs"></span>
    </p>
    <h4>垂直スライダー</h4>
    <p>Value: 
    	<input id="Vvalue" value="-0"></p>
    	<div id="Vs"></div>
</div>
</body>

　（1）と（3）はそれぞれ、水平／垂直スライダーの設定です。水平か垂直はaxisプロパティに'x'か'y'を置くことで指定できます。afterは、イベントを指定するプロパティです。afterプロパティのvalueChangeは値が変わったとき実行されます。他のイベントを以下の表に示します。

Y.Sliderのイベント

イベント	概要
slideStart	スライド開始時
thumbMove	スライド移動時
valueChange	値が変わったとき
slideEnd	スライド終了時
railMouseDown	スライダー上でマウスが押された

　（2）と（4）でスライダーを表示します。スライダーの設定値の読み出しは.getValue()、書き込みは.setValue(newVal)となります。

　V3.1.0でスライダーの形のサポートが増えました。増えたスライダーを図示します。

図3：スライダーのスキン一覧