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 吧
回應 (Leave a comment)