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)