• 转载: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] )  
  • 相关阅读:
    const---ES6的新特性---从js角度理解
    mpvue搭建微信小程序
    get和post区别,面试中经典答法
    Deno增删查改(CRUD)应用
    Thymeleaf货币转换
    Spring Security和Spring Core 依赖冲突
    Java15于2020/09/15发版
    WebFlux系列(十三)MySql应用新增、修改、查询、删除
    WebFlux系列(十二)MongoDB应用,新增、修改、查询、删除
    Spring Boot(4) Mongo数据库新增、删除、查询、修改
  • 原文地址:https://www.cnblogs.com/lraa/p/2914451.html
Copyright © 2020-2023  润新知