¿Cómo seleccionar mediante programación las selecciones con jQuery UI?

Question

Tengo una gama de elementos que se pueden seleccionar. Me gustaría agregar un botón en algún lugar que active una selección preestablecida entre esos. ¿Hay alguna manera de que pueda hacer eso?

Lo que me gustaría es decirle "Seleccione estos tipos" y luego tener todos los eventos y todos disparados como siempre, así que no tengo que llamar a todos los eventos de selección manualmente.

Más información: Los eventos que diciendo son los que se enumeran en their api y en their demo page:

• seleccionado
• seleccionar
• inicio
• parada
• no seleccionada
• deseleccionar

Y también, creo que puede haber datos que también se configuran/borran al seleccionar cosas. Entonces no es solo para agregar esas clases de CSS.

Answer 1

Aquí es una variación del código de Alex R trabajar con múltiples elementos

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); 
} 

Actualización:

jQueryUI 1.10, por los comentarios de kmk: http://jsfiddle.net/XYJEN/163/

Answer 2

Editar: Perdón por el malentendido, estoy editando mi respuesta.

lo tanto, sí es posible la selección del objeto corresponde a la interfaz de usuario-seleccionada clase, así que lo que puede hacer es:

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

    ....... 

}); 

Answer 3

¿No es posible activar el evento selected manualmente con .trigger('selected')?

Answer 4

El uso de código de Ionut, ¿qué tal:

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

?

Answer 5

Hay que ir :

,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 
} 

Añadir esto después de _mouseStop en selectable.js y entonces se puede decir :

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

... o lo que quiera.

Tener diversión!:)

Answer 6

Suponiendo que la muestra seleccionable en el sitio web 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 --> 

se puede tener una función como:

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); 
    } 

y utilizarlo como:

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

Esto se puede mejorar para permitir la selección de una colección de elementos, pero es un punto de partida para obtener tu yendo