课件-87.第十二章jquery部件1slider上widget

1、滑动条- Slider Widget滑动条在网页中生成一个滑动条，从而实现不必在 input 文本框里输入值，而是通过滑动来选择一个值1、初探$(#siku).slider();2、配置滑动条1）animate类型:or String or Number: 当设置为 true 时, 滑动手柄将以默认的时间执行动画String: 速度的名称, 比如 fast 或 slowNumber: 动画持续时间, 以毫秒为默认值: false说明：当用户单击滑块轨道时是否平稳地滑动手柄2）max类型: Number说明：滑块的最大值默认值: 1004）min类型: Number说明：滑块的最小值默认值: 0

2、5）orienion类型: String说明：滑块的方向，横向或纵向可能的值：horizontal（横向）, vertical（纵向）默认值: horizontal6）range类型:or String: 如果设置为 true,则有两个手柄String: 或者他们是min 或者 max值。如果是 min 则范围为最小值到手柄，如果是 max 则范围为手柄到最大值说明：滑块是否表现为一个范围默认值: false7）step类型: Number说明：定义 slider 从最小值移动到最大值的步长。在这个指定范围(最小值到最大值)内的值需要能被范围整除默认值: 18）value类型: Number说

3、明：指定 slider 的 value 值默认值: 09）values类型: Array说明：如果 range 设置为 true，这个选项可以用来为多个操作柄设定 value 值默认值: null3、方法1）destroy说明：完全销毁滑块组件的功能举例：$( .selector ).slider( destroy );2）disable说明：禁用滑块组件举例：$( .selector ).slider( disable );3）enable说明：启用滑块组件4）option说明：获取/设置选项值举例：var isDisabled = $( .selector ).slider( option

4、, disabled );var options = $( .selector ).slider( option );$( .selector ).slider( option, disabled, true );$( .selector ).slider( option, disabled: true );5）value说明：获取/设置 滑块组件的值举例：var selection = $( .selector ).slider( value );$( .selector ).slider( value, 55 );6）values说明：获取所有 手柄的值（适用于多手柄的滑块）举例：var

5、values = $( .selector ).slider( values );获取指定 手柄的值（适用于多手柄的滑块）var value = $( .selector ).slider( values, 0 );设置指定手柄的值$( .selector ).slider( values, 0, 55 );设置所有手柄的值$( .selector ).slider( values, 55, 105 );4、事件1）change( event, ui )当用户停止滑动，且滑块的值改变了，就会触发这个事件；或者通过 value 方法改变手柄值ui（Type: Object）handle（Type

6、: jQuery）一个 jQuery 对象，表示被改变柄value（Type: Number）当前滑块的值2）create( event, ui )当滑块组件被创建时触发ui 对象是空的，这里包含它是为了与其他事件保持一致性3）slide( event, ui )滑动滑块时触发ui（Type: Object）handle（Type: jQuery）一个 jQuery 对象，表示被改变柄value（Type: Number）当前滑块的值values（Type: Array）一个 多手柄滑块 当前值的数组4）start( event, ui )当用户开始滑动滑块时触发ui（Type: Object

7、）handle（Type: jQuery）一个 jQuery 对象，表示被改变柄value（Type: Number）当前滑块的值5）stop( event, ui )当用户滑动滑块后触发ui（Type: Object）handle（Type: jQuery）一个 jQuery 对象，表示被改变柄value（Type: Number）当前滑块的值5、界面ui-slider|=ui-slider-handle|=ui-slider-range1）ui-slider滑块控件的轨道，该元素将追加一个 ui-slider-horizontal 或 ui-slider-vertical 样式名，这取决于 slider 小工具是横向还是纵向的！2）ui-slider-handle滑块手柄3）