转载:JQuery UI - slider

转载网址:http://jawallok.blog.163.com/blog/static/3332397420100702933701/

  1. ·概述   
  2. 滑动条是一种简单的设置一定范围内参数的插件。   
  3. 官方示例地址:http://jqueryui.com/demos/slider/   
  4.   
  5.   
  6. ·参数(参数名 : 参数类型 : 默认名称)   
  7. animate : Boolean : false  
  8.   设置是否在拖动滑块时执行动画效果。   
  9.   初始:$('.selector').slider({ animate: true });   
  10.   获取:var animate = $('.selector').slider('option''animate');   
  11.   设置:$('.selector').slider('option''animate'true);   
  12.   
  13. max : Number : 100   
  14.   设置滑动条的最大值。   
  15.   初始:$('.selector').slider({ max: 7 });   
  16.   获取:var max = $('.selector').slider('option''max');   
  17.   设置:$('.selector').slider('option''max', 7);   
  18.   
  19. min : Number : 0   
  20.   设置滑动条的最小值。   
  21.   初始:$('.selector').slider({ min: -7 });   
  22.   获取:var min = $('.selector').slider('option''min');   
  23.   设置:$('.selector').slider('option''min', -7);   
  24.   
  25. orientation : String : 'auto'  
  26.   通常不需要设置此选项,程序会自动识别,如果未正确识别,则可以设置为:'horizontal' 或 'vertical'。   
  27.   初始:$('.selector').slider({ orientation: 'vertical' });   
  28.   获取:var orientation = $('.selector').slider('option''orientation');   
  29.   设置:$('.selector').slider('option''orientation''vertical');   
  30.   
  31. range : Boolean, String : false  
  32.   如果设置为true,滑动条会自动创建两个滑块,一个最大、一个最小,用于设置一个范围内值。   
  33.   初始:$('.selector').slider({ range: 'min' });   
  34.   获取:var range = $('.selector').slider('option''range');   
  35.   设置:$('.selector').slider('option''range''min');   
  36.   
  37. step : Number : 1   
  38.   在最大值和最小值中间设置滑块步进大小,此值必须能被(max-min)平分。   
  39.   初始:$('.selector').slider({ step: 5 });   
  40.   获取:var step = $('.selector').slider('option''step');   
  41.   设置:$('.selector').slider('option''step', 5);   
  42.   
  43. value : Number : 0   
  44.   设置初始时滑块的值,如果有多个滑块,则设置第一个滑块。   
  45.   初始:$('.selector').slider({ value: 37 });   
  46.   获取:var value = $('.selector').slider('option''value');   
  47.   设置:$('.selector').slider('option''value', 37);   
  48.   
  49. values : Array : null  
  50.   此属性用于设置滑块的初始值,并且只当range设置为true时有效。(至少两个滑块值)   
  51.   初始:$('.selector').slider({ values: [1,5,9] });   
  52.   获取:var values = $('.selector').slider('option''values');   
  53.   设置:$('.selector').slider('option''values', [1,5,9]);   
  54.   
  55.   
  56. ·事件   
  57. start : slidestart   
  58.   当滑块开始滑动时,触发此事件。   
  59.   初始:$('.selector').slider({ start: function(event, ui) { ... } });   
  60.   绑定:$('.selector').bind('slidestart'function(event, ui) { ... });   
  61.   
  62. slide : slide   
  63.   当滑块滑动时,触发此事件。使用ui.value获取当前值,或$(..).slider('value', index)获取其它滑块的值。   
  64.   初始:$('.selector').slider({ slide: function(event, ui) { ... } });   
  65.   绑定:$('.selector').bind('slide'function(event, ui) { ... });   
  66.   
  67. change : slidechange   
  68.   当滑块滑动且值发生改变时,触发此事件。事件带两个参数event and ui,使用event.orginalEvent来判断是键盘或鼠标或其它触发,用ui.value获取当前值,用$(this).slider('values', index)获取其它滑块的值。   
  69.   初始:$('.selector').slider({ change: function(event, ui) { ... } });   
  70.   绑定:$('.selector').bind('slidechange'function(event, ui) { ... });   
  71.   
  72. stop : slidestop   
  73.   当滑块停止滑动时,触发此事件。   
  74.   初始:$('.selector').slider({ stop: function(event, ui) { ... } });   
  75.   绑定:$('.selector').bind('slidestop'function(event, ui) { ... });   
  76.   
  77.   
  78. ·属性   
  79. destroy   
  80.   销毁当前滑动条对象。   
  81.   用法:.slider( 'destroy' )   
  82.   
  83. disable   
  84.   禁用当前滑动条。   
  85.   用法:.slider( 'disable' )   
  86.   
  87. enable   
  88.   启用当前滑动条。   
  89.   用法:.slider( 'enable' )   
  90.   
  91. option   
  92.   获取或设置当前滑动条的参数。   
  93.   用法:.slider( 'option' , optionName , [value] )   
  94.   
  95. value   
  96.   获取或设置当前滑动条的值。   
  97.   用法:.slider( 'value' , [value] )   
  98.   
  99. values   
  100.   获取或设置当前滑动条的所有滑块的值。   
  101.   用法:.slider( 'values' , index , [value] )  
posted @ 2013-02-17 16:11  lraa  阅读(5422)  评论(0编辑  收藏  举报