PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

    JQuery UI – selectable 中文文档

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:·概述Selectable插件允许用户对指定的元素进行选中的动作。此外还支持按住Ctrl键单击或拖拽选择多个元素。官方示例地址:http://jqueryui....
    ·概述

    Selectable插件允许用户对指定的元素进行选中的动作。此外还支持按住Ctrl键单击或拖拽选择多个元素。
    官方示例地址:http://jqueryui.com/demos/selectable/

    ·参数(参数名 : 参数类型 : 默认值)
    autoRefresh : Boolean : true
    决定是否在每次选择动作时,都重新计算每个选中元素的坐标和大小。如果你有很多个选择项的话,建议设置成false并通过方法手动刷新。
    初始:$(‘.selector’).selectable({ autoRefresh: false });
    获取:var autoRefresh = $(‘.selector’).selectable(‘option’, ‘autoRefresh’);
    设置:$(‘.selector’).selectable(‘option’, ‘autoRefresh’, false);

    autoRefresh : Boolean : true
    决定是否在每次选择动作时,都重新计算每个选中元素的坐标和大小。如果你有很多个选择项的话,建议设置成false并通过方法手动刷新。
    初始:$(‘.selector’).selectable({ autoRefresh: false });
    获取:var autoRefresh = $(‘.selector’).selectable(‘option’, ‘autoRefresh’);
    设置:$(‘.selector’).selectable(‘option’, ‘autoRefresh’, false);

    cancel : Selector : ‘:input,option’
    防止在与选择器相匹配的元素上发生选择动作。
    初始:$(‘.selector’).selectable({ cancel: ‘:input,option’ });
    获取:var cancel = $(‘.selector’).selectable(‘option’, ‘cancel’);
    设置:$(‘.selector’).selectable(‘option’, ‘cancel’, ‘:input,option’);

    delay : Integer : 0
    以毫秒为单位,设置延迟多久才激活选择动作。此参数可防止误点击。
    初始:$(‘.selector’).selectable({ delay: 20 });
    获取:var delay = $(‘.selector’).selectable(‘option’, ‘delay’);
    设置:$(‘.selector’).selectable(‘option’, ‘delay’, 20);

    distance : Integer : 0
    决定至少要在元素上面拖动多少像素后,才正式触发选中的动作。
    初始:$(‘.selector’).selectable({ distance: 20 });
    获取:var distance = $(‘.selector’).selectable(‘option’, ‘distance’);
    设置:$(‘.selector’).selectable(‘option’, ‘distance’, 20);

    filter : Selector : ‘*’
    设置哪些子元素才可以被选中。
    初始:$(‘.selector’).selectable({ filter: ‘li’ });
    获取:var filter = $(‘.selector’).selectable(‘option’, ‘filter’);
    设置:$(‘.selector’).selectable(‘option’, ‘filter’, ‘li’);

    tolerance : String : ‘touch’
    可选值:’touch’, ‘fit’,分别代表完全和部署覆盖元素即触发选中动作。
    初始:$(‘.selector’).selectable({ tolerance: ‘fit’ });
    获取:var tolerance = $(‘.selector’).selectable(‘option’, ‘tolerance’);
    设置:$(‘.selector’).selectable(‘option’, ‘tolerance’, ‘fit’);

    ·事件
    selected
    当选中某一个元素后触发此事件。
    初始:$(‘.selector’).selectable({ selected: function(event, ui) { … } });
    绑定:$(‘.selector’).bind(‘selected’, function(event, ui) { … });

    selecting
    当选中某一个元素时触发此事件。
    初始:$(‘.selector’).selectable({ selecting: function(event, ui) { … } });
    绑定:$(‘.selector’).bind(‘selecting’, function(event, ui) { … });

    start
    当开始准备要选中一个元素时触发此事件。
    初始:$(‘.selector’).selectable({ start: function(event, ui) { … } });
    绑定:$(‘.selector’).bind(‘selectablestart’, function(event, ui) { … });

    stop
    当已经结束选中一个元素时触发此事件。
    初始:$(‘.selector’).selectable({ stop: function(event, ui) { … } });
    绑定:$(‘.selector’).bind(‘selectablestop’, function(event, ui) { … });

    unselected
    当取消选中某一个元素后触发此事件。
    初始:$(‘.selector’).selectable({ unselected: function(event, ui) { … } });
    绑定:$(‘.selector’).bind(‘unselected’, function(event, ui) { … });

    unselecting
    当取消选中某一个元素后触发此事件。
    初始:$(‘.selector’).selectable({ unselecting: function(event, ui) { … } });
    绑定:$(‘.selector’).bind(‘unselecting’, function(event, ui) { … });

    ·方法
    destory
    从元素中移除拖拽功能。
    用法:.droppable( ‘destroy’ )

    disable
    禁用元素的拖拽功能。
    用法:.droppable( ‘disable’ )

    enable
    启用元素的拖拽功能。
    用法:.droppable( ‘enable’ )

    option
    获取或设置元素的参数。
    用法:.droppable( ‘option’ , optionName , [value] )

    refresh
    用于手动刷新、重新计算每个选中元素的位置和大小。当autoRefresh设置成false,此方法对于刷新大量选中项非常有用。
    用法:.selectable( ‘refresh’ )

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-2705-1.html
    相关热词搜索: