Domanda Come selezionare i selectables con l'interfaccia utente jQuery?


Ho una gamma di elementi che sono selezionabili. Vorrei aggiungere un pulsante da qualche parte per attivare una selezione preimpostata tra quelle. C'è un modo per farlo?

Quello che vorrei è dirlo a "Seleziona questi ragazzi" e poi avere tutti gli eventi e tutti sparati come di consueto, quindi non devo chiamare manualmente tutti quegli eventi di selezione.

Ulteriori informazioni: Gli eventi di cui parlo sono quelli elencati in la loro api e via la loro pagina demo:

  • selezionato
  • Selezione
  • inizio
  • Stop
  • non selezionato
  • deselezionando

Inoltre, penso che potrebbero esserci dati che vengono impostati / cancellati anche quando si selezionano le cose. Quindi non è solo per aggiungere quelle classi CSS.


25
2018-06-29 11:05


origine


risposte:


Ecco una variante del codice di Alex R che funziona con più elementi

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

Aggiornare: 

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


25
2018-02-23 20:56



Supponendo che il campione selezionabile sul sito Web dell'interfaccia utente jQuery (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 -->

puoi 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 usalo come:

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

Questo può essere migliorato per consentire la selezione di una collezione di elementi, ma è un punto di partenza per iniziare.


14
2018-02-01 14:41



Eccoti partire:

,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 puoi dire:

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

... o qualunque cosa ti piaccia

Avere divertimento! :)


4
2017-07-13 16:50



Modifica: scusa per l'incomprensione, sto modificando la mia risposta.

Quindi, sì, è possibile che la selezione dell'oggetto corrisponda alla classe ui-selezionata, quindi quello che puoi fare è:

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

  .......

});

2
2018-06-29 11:27



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


0
2017-07-08 14:10



Usando il codice Ionut, che ne dici di:

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

?


0
2017-07-09 16:09