2012
Jan
10

YUI Input Slider 是一個可以使用滑鼠拖拉,來改變數值的功能,像是輸入年齡、身高、體重等等,這個方式就還蠻好用的,而且 YUI Slider 的使用方式很簡單,短短的幾行 code 就搞定了,先來個範例吧,下面的捲軸是可以拖拉的。

請輸入年齡

YUI Slider html

範例
  1. <div class="slideface yui3-skin-sam">
  2. 請輸入年齡 <input type=="text" id="data" value="50" size="2" />
  3. </div>

這裡我使用的樣版是 sam ,所以 class 加入了 yui3-skin-same,並給一個初始的值 value=50 ,下一步我再用 Javascript 去抓初始值,並指定給 yui。

YUI Slider Code

範例
  1. YUI().use("node","slider",function(Y){
  2. function bindSlider(){
  3. Y.one(".slideface").setStyles({textAlign:"center"});
  4. var v=Y.one("#data").get("value");
  5. var slider= new Y.Slider({
  6. value:v, // 設定初始值
  7. axis : "y", // x 為橫向拖拉, y為縱向拖拉
  8. min : 10, //設定最小值
  9. max:100 //設定最大值
  10. });
  11. function update(e){
  12. Y.one("#data").set("value",e.newVal);
  13. }
  14. slider.on("valueChange",update,Y);
  15. slider.render(".slideface");
  16. }
  17. Y.on("domready", bindSlider()); // 當 html 載入完畢後,才執行 yui 語法
  18.  
  19. });
valueChange 是 Slider 的一個事件,當數值改變的時候,才會觸發此事件,這裡我有指定 valueChange function ,當用戶拖拉捲軸後, function會自動去修改 input 的 Value。

結束囉

自已去試試 YUI Slider 吧

回應 (Leave a comment)