如何用jQuery UI以编程方式选择selectables？

Question

我有一系列可选择的项目.我想在某处添加一个按钮,激活其中的预设选择.有没有办法可以做到这一点？

我想要的是告诉它"选择这些家伙",然后将所有事件和所有事件都解雇正常,所以我不必手动调用所有这些选择事件.

更多信息:我所谈论的事件是他们的api和他们的演示页面中列出的事件:

• 选
• 选择
• 开始
• 停
• 未选中
• 取消选择

而且,我认为在选择时可能会设置/清除数据.所以不只是添加那些css类.

Answer 1

以下是Alex R的代码与多个元素的变体

http://jsfiddle.net/XYJEN/1/

function SelectSelectableElements (selectableContainer, elementsToSelect)
{
    // add unselecting class to all elements in the styleboard canvas except the ones to select
    $(".ui-selected", selectableContainer).not(elementsToSelect).removeClass("ui-selected").addClass("ui-unselecting");

    // add ui-selecting class to the elements to select
    $(elementsToSelect).not(".ui-selected").addClass("ui-selecting");

    // trigger the mouse stop event (this will select all .ui-selecting elements, and deselect all .ui-unselecting elements)
    selectableContainer.data("selectable")._mouseStop(null);
}

更新:

jQueryUI 1.10,来自kmk的评论:http://jsfiddle.net/XYJEN/163/

Answer 2

假设jQuery UI网站上的可选样本(http://jqueryui.com/demos/selectable/):

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#selectable" ).selectable();
    });
    </script>



<div class="demo">

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

</div><!-- End demo -->

你可以有这样的功能:

    function selectSelectableElement (selectableContainer, elementToSelect)
    {
        // add unselecting class to all elements in the styleboard canvas except current one
        jQuery("li", selectableContainer).each(function() {
        if (this != elementToSelect[0])
            jQuery(this).removeClass("ui-selected").addClass("ui-unselecting");
        });

        // add ui-selecting class to the element to select
        elementToSelect.addClass("ui-selecting");

        selectableContainer.selectable('refresh');
        // trigger the mouse stop event (this will select all .ui-selecting elements, and deselect all .ui-unselecting elements)
        selectableContainer.data("selectable")._mouseStop(null);
    }

并使用它像:

// select the fourth item
selectSelectableElement (jQuery("#selectable"), jQuery("#selectable").children(":eq(3)"));

这可以改进,以允许选择元素的集合,但它是一个让你前进的起点.