Cómo seleccionar mediante programación seleccionables con jQuery UI?

Question

Tengo una gama de artículos que se pueden seleccionar. Me gustaría añadir un botón que activa en alguna parte una selección preestablecida entre las personas. ¿Hay alguna manera de hacer eso?

Lo que me gustaría es para decirle que "Seleccionar estos chicos" y luego tener todos los eventos y todos disparado de forma normal, así que no tengo que llamar a todos los eventos de selección manual.

Más información: Los eventos que se hablo de los que se detallan en su api y en su página de demostración :

• seleccionado
• selección
• start
• parada
• no seleccionada
• desmarcando

Y también, creo que puede haber datos que se establecen / aclarado así la hora de seleccionar las cosas. Así que no es sólo para añadir esas clases CSS.

Answer 1

Aquí es una variación del trabajo código de Alex R 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:

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

Answer 2

Si se asume 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 -->

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 puede ser mejorado para permitir la selección de un conjunto de elementos, pero es un punto de partida para que te va.

Answer 3

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 luego se puede decir

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

... o lo que quiera.

Tienes diversión ! :)

Answer 4

Editar:. Lo siento por el malentendido, estoy editando mi respuesta

Así que, sí es posible la selección de los objetos corresponde a la interfaz de usuario-seleccionada clase, así que lo que puede hacer es:

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

  .......

});

Answer 5

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

Answer 6

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

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