example - ¿Cómo seleccionar programáticamente las selectables con jQuery UI?

panel colapsable jquery

Question

Tengo una gama de artículos que son seleccionables. 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, por lo que no tengo que llamar manualmente a todos los eventos de selección.

Más información: los eventos de los que hablo son los que figuran en su API y en su página de demostración :

• seleccionado
• seleccionando
• comienzo
• detener
• no seleccionado
• deseleccionar

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

Answer 1

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

Answer 2

Ahí tienes:

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

Agregue esto después de _mouseStop en selectable.js y luego puede decir :

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

... o lo que quieras

¡Diviértete! :)

Answer 3

Aquí hay una variación del código de Alex R trabajando 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);
}

Actualizar:

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

Answer 4

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

Entonces, sí, es posible que la selección del objeto corresponda a la clase ui-seleccionada, entonces lo que puedes hacer es:

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

  .......

});

Answer 5

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

puedes 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 úsalo 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 comenzar.

Answer 6

Usando el código de Ionut, ¿qué tal?

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

?