mehrere wählt Implementieren mit jQuery UI wählbar

Question

kann mir jemand helfen, die jQuery UI wählbar-Bibliothek verwenden, um die folgenden Funktionen auszuführen:

• erlauben es einem Benutzer mehrere Elemente mit einem Mausklick
• Abwählen eine Auswahl Element, wenn es bereits mit einem Mausklick ausgewählt wurde

Answer 1

Dies wird gearbeitet um in another question, aber ich bin reposting hier für jeden, der dies über Google findet. Wenn Sie das Ereignis "mousedown" in jQuery binden und dort den metaKey festlegen (als ob der Benutzer die Taste ctrl/cmd gedrückt hält), wird er beim Aufruf als auswählbar bereits gesetzt.

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

Answer 2

Haben Sie die demo page for selectable überprüft? Du kannst das schon machen. Um mehrere Objekte auszuwählen, halten Sie einfach die Kontrolle. Dies ist ähnlich wie bei der Arbeit mit Dateien. Ist "Strg + Klick" nicht gut genug?

Demo-Code hier:

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

Nicht wählbar verwenden, aber dies wird Ihnen das Verhalten, das Sie mit dem Setup wollen bekommen Sie bereits haben:

statt

$("#selectable").selectable() 

versuchen

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

Answer 4

Nehmen ein Blick auf meine Antwort auf diesen Thread.

jQuery UI selectable - making multiple select default

Es enthält den vollständigen Code Ersatz für die auswählbaren ui js sowie umreißt die Änderungen erforderlich, so dass dies eine Option, die übergeben werden kann.

Answer 5

Verwendung dieser Code ot sein können, hilft Ihnen

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

, wenn Sie die auswählbaren auf dem Tisch verwenden für den Einsatz wählbar td ('Filter: td') else

Verwendung wählbar()