2012
Jan
10
YUI Input Slider 是一個可以使用滑鼠拖拉，來改變數值的功能，像是輸入年齡、身高、體重等等，這個方式就還蠻好用的，而且 YUI Slider 的使用方式很簡單，短短的幾行 code 就搞定了，先來個範例吧，下面的捲軸是可以拖拉的。
YUI Slider html
範例
- <div class="slideface yui3-skin-sam">
- 請輸入年齡 <input type=="text" id="data" value="50" size="2" />
- </div>
這裡我使用的樣版是 sam ，所以 class 加入了 yui3-skin-same，並給一個初始的值 value=50 ，下一步我再用 Javascript 去抓初始值，並指定給 yui。
YUI Slider Code
範例
- YUI().use("node","slider",function(Y){
- function bindSlider(){
- Y.one(".slideface").setStyles({textAlign:"center"});
- var v=Y.one("#data").get("value");
- var slider= new Y.Slider({
- value:v, // 設定初始值
- axis : "y", // x 為橫向拖拉， y為縱向拖拉
- min : 10, //設定最小值
- max:100 //設定最大值
- });
- function update(e){
- Y.one("#data").set("value",e.newVal);
- }
- slider.on("valueChange",update,Y);
- slider.render(".slideface");
- }
- Y.on("domready", bindSlider()); // 當 html 載入完畢後，才執行 yui 語法
- });
valueChange 是 Slider 的一個事件，當數值改變的時候，才會觸發此事件，這裡我有指定 valueChange function ，當用戶拖拉捲軸後， function會自動去修改 input 的 Value。
結束囉
自已去試試 YUI Slider 吧