网站定制功能,关键词怎么提取,专业做国际网站的公司,开源购物商城一、slider滑动条框 滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。
二、例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"…
一、slider滑动条框
滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。
二、例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Slider（滑动条）</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link><link rel="stylesheet" href="../themes/icon.css" type="text/css"></link><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script></head><body><div style="margin:100px">身高：<span id="tip"></span><p/><div id="ss" style="height:400px;width:600px"></div> </div><script type="text/javascript">$("#ss").slider({mode : "v",min : 150,max : 190,rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],showTip : true,value : 150});</script><script type="text/javascript">$("#ss").slider({onChange : function(newValue){if(newValue == 160){$("#tip").text("合格").css("color","blue");}else if(newValue == 170){$("#tip").text("良好").css("color","green");}else if(newValue == 180){$("#tip").text("优秀").css("color","pink");}else if(newValue == 190){$("#tip").text("卓越").css("color","red");} }});</script></body>
</html>效果如下：
三、属性
| 属性名 | 属性类型 | 描述 | 默认值 |
|---|---|---|---|
| width | number | 滑动条宽度。 | auto |
| height | number | 滑动条高度。 | auto |
| mode | string | 声明滚动条类型。可用值有：'h'(水平)、'v'(垂直)。 | h |
| reversed | boolean | 设置为true时，最小值和最大值将对调他们的位置。（该属性自1.3.2版开始可用） | false |
| showTip | boolean | 定义是否显示值信息提示。 | false |
| disabled | boolean | 定义是否禁用滑动条。 | false |
| value | number | 默认值。 | 0 |
| min | number | 允许的最小值。 | 0 |
| max | number | 允许的最大值。 | 100 |
| step | number | 值增加或减少。 | 1 |
| rule | array | 显示标签旁边的滑块，'|' — 只显示一行。 | [] |
| tipFormatter | function | 该函数用于格式化滑动条。返回的字符串值将显示提示。 |
四、事件
| 事件名 | 事件参数 | 描述 |
|---|---|---|
| onChange | newValue, oldValue | 在字段值更改的时候触发。 |
| onSlideStart | value | 在开始拖拽滑动条的时候触发。 |
| onSlideEnd | value | 在结束拖拽滑动条的时候触发。 |
五、方法
| 方法名 | 方法参数 | 描述 |
|---|---|---|
| options | none | 返回滑动条属性。 |
| destroy | none | 销毁滑动条对象。 |
| resize | param | 设置滑动条大小。'param'参数包含一下属性： width：新滑动条宽度。 height：新滑动条高度。 |
| getValue | none | 获取滑动条的值。 |
| setValue | value | 设置滑动条的值。 |
| clear | none | 清除滑动条的值。 |
| reset | none | 重置滑动条的值。 |
| enable | none | 启用滑动条控件。 |
| disable | none | 禁用滑动条控件。 |