Как программно выбрать выборки с jQuery ui?

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, за комментарии от КМК: 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)"));

Это может быть улучшено, чтобы позволить выбрать коллекцию элементов, но это отправная точка, чтобы получить вы.

Answer 3

Там вы идти:

,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 в selectable.js а потом вы можете сказать:

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

... или что угодно.

Есть весело! :)

Answer 4

Редактировать: Извините за недоразумение, я редактирую мой ответ.

Итак, да, возможно, выбор объекта соответствует выбранному классу UI, так что вы можете сделать:

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

  .......

});

Answer 5

Разве невозможно вызвать selected событие вручную с .ttrigger («выбран»)?

Answer 6

Использование IONUT код, как насчет:

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

?