Come selezionare a livello di codice selezionabili con jQuery UI?

Question

Ho una serie di elementi che sono selezionabili. Vorrei aggiungere un qualche tasto che attiva una selezione di preset tra quelli. C'è un modo che io possa fare questo?

Quello che vorrei è per dirgli di "Select questi ragazzi" e poi tutti gli eventi e tutte licenziato come normale, in modo da non devo chiamare tutti quegli eventi di selezione manuale.

Più informazioni: Gli eventi che parlo sono quelli elencati nel loro api e su sua pagina demo :

• selezionato
• selezionando
• avviare
• arresto
• non selezionata
• deselezionando

E poi, penso che ci potrebbero essere i dati che è impostato / cancellato così quando si selezionano le cose. Quindi non si tratta solo di aggiungere quelle classi CSS.

Answer 1

Ecco una variazione di lavoro codice di Alex R con elementi multipli

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

Aggiornamento:

jQueryUI 1,10, per commenti da kmk: http://jsfiddle.net/XYJEN/163/

Answer 2

Supponendo che il campione selezionabili sul sito 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 -->

si può avere una funzione come:

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

e utilizzarlo come:

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

Questo può essere migliorato per consentire la selezione di un insieme di elementi, ma è un punto di partenza per farti andare.

Answer 3

Vai :

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

Aggiungi questo dopo _mouseStop in selectable.js e poi si può dire :

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

... o quello che vuoi.

Hanno divertente ! :)

Answer 4

Modifica:. Ci scusiamo per l'equivoco, sto modificando la mia risposta

Quindi, sì è possibile la selezione dei corrisponde con la classe di ui-selezionati, in modo da che cosa si può fare è:

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

  .......

});

Answer 5

Non è possibile attivare manualmente l'evento selected con .trigger ( 'selezionato') ?

Answer 6

Usando il codice Ionut, come su:

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