jquery-ui - multiselect - list jquery

Implementar selecciones múltiples con jQuery UI seleccionable

Question

¿Alguien puede ayudarme a usar la biblioteca seleccionable de jquery ui para realizar las siguientes funciones?

• Permitir que un usuario seleccione varios elementos con un clic del mouse
• Deseleccione un elemento si ya está seleccionado con un clic del mouse

Answer 1

¿Has marcado la página de demostración para seleccionar ? Ya puedes hacer esto. Para seleccionar varios elementos, solo mantenga el control. Esto es similar a cómo trabajarías con los archivos. ¿Usar "Ctrl + Click" no es lo suficientemente bueno?

Código de demostración aquí:

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

Answer 2

Eche un vistazo a mi respuesta en este hilo.

jQuery UI seleccionable: hacer selecciones múltiples por defecto

Incluye el reemplazo completo del código para los ui js seleccionables, así como la descripción de los cambios necesarios, lo que hace que esta opción se pueda aprobar.

Answer 3

Esto se solucionó en otra pregunta , pero estoy reubicando aquí para cualquier persona que encuentre esto a través de google. Si vincula el evento "mousedown" en jQuery y establece metaKey allí (como si el usuario estuviera presionando la tecla ctrl / cmd), cuando llame a seleccionable, ya estará configurado.

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();

Answer 4

No utiliza seleccionable pero esto le dará el comportamiento que desea con la configuración que ya tiene:

en lugar de

$( "#selectable" ).selectable()

tratar

$(".ui-widget-content").click( function() {
    $(this).toggleClass("ui-selected");
});

Answer 5

utilizar este código puede ser ot te ayuda

  $(''#selectable'').bind("mousedown", function (e) {
      e.metaKey = true;    
 }).selectable(''filter : td'')​

si está utilizando la tabla seleccionable para td, el uso seleccionable (''filtro: td'') else

usar seleccionable ()