Как программно выбирать селективные элементы с помощью jQuery UI?

Question

У меня есть ряд предметов, которые можно выбрать. Я хотел бы добавить кнопку где-нибудь, которая активирует предустановленный выбор среди них. Есть ли способ, которым я могу это сделать?

Я хотел бы рассказать об этом «Выберите этих ребят», а затем все события и все будут работать как обычно, поэтому мне не нужно вызывать все эти события выбора вручную.

Подробнее: События, которые я говорю о являются те, что перечислены в their api и на their demo page:

• выбран
• выбирающий
• старт
• остановка
• невыбранные
• unselecting

А также, я думаю, могут быть данные, которые устанавливаются и очищаются также при выборе вещей. Поэтому не просто добавлять эти классы 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); 
} 

Update:

jQueryUI 1,10, в комментарии от КМК: http://jsfiddle.net/XYJEN/163/

Answer 2

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

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

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

    ....... 

}); 

Answer 3

Разве это не возможно, чтобы вызвать selected событие вручную с .trigger('selected')?

Answer 4

Используя Ionut код, как насчет:

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

?

Answer 5

Там вы идти:

,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")); 

... или что-то вам нравится.

У fun! :)

Answer 6

Предполагая, выбираемый образец на сайте 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)")); 

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