25

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

我想告诉它“选择这些人”，然后让所有事件都正常触发，所以我不必手动调用所有这些选择事件。

更多信息：我谈论的事件是在他们的 api和他们的演示页面上列出的事件：

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

而且，我认为在选择事物时可能还会设置/清除数据。所以不仅仅是添加那些css类。

4

6 回答 6

28

这是 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/

于 2012-02-23T20:56:53.730 回答
14

假设 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)"));

这可以改进以允许选择元素集合，但它是让您开始的起点。

于 2011-02-01T14:41:23.950 回答
4

你去：

,calc: function() { this._mouseStop(); },
custom: function(guys) {
  var self = this;
  self.selectees.removeClass("ui-selected");
  guys.each(function(){
    $(this).addClass("ui-selecting");
    self._trigger("selecting", {}, {
       selecting: this
    });
  });
  this.calc(); // do the selection + trigger selected
}

_mouseStop在in之后添加这个selectable.js，然后你可以说：

$("#selectable").selectable("custom", $("#selectable :first-child"));

...或任何你喜欢的。

玩得开心！:)

于 2010-07-13T16:50:58.447 回答
2

编辑：对不起，我正在编辑我的答案。

所以，是的，对象的选择可能对应于 ui-selected 类，所以你可以做的是：

$(#button).click(function(){
  $("#element1").addClass("ui-selected");

  .......

});
于 2010-06-29T11:27:48.287 回答
0

是否无法使用.trigger('selected')selected手动触发事件？

于 2010-07-08T14:10:49.467 回答
0

使用 Ionut 代码，如何：

 $("#selectable li:first").trigger('start').trigger('selecting').trigger('selected');

?

于 2010-07-09T16:09:38.707 回答