может кто-нибудь помочь мне использовать библиотеку jquery ui selectable для выполнения следующих функций:
- Разрешить пользователю выбирать несколько элементов с помощью мыши.
- Отменить выбор элемента, если он уже выбран щелчком мыши
может кто-нибудь помочь мне использовать библиотеку jquery ui selectable для выполнения следующих функций:
Это работает в еще одном вопросе, но я переписываю здесь всех, кто находит это через google. Если вы связываете событие "mousedown" в jQuery и устанавливаете там metaKey (как если бы пользователь держал ключ ctrl/cmd), тогда, когда вы вызываете selectable, он уже будет установлен.
$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable();
Не использовать Selectable, но это приведет к поведению, которое вы хотите, с уже настроенной настройкой:
вместо
$( "#selectable" ).selectable()
попробовать
$(".ui-widget-content").click( function() {
$(this).toggleClass("ui-selected");
});
Вы проверили демонстрационную страницу для выбора? Вы уже можете это сделать. Чтобы выбрать несколько элементов, просто удерживайте управление. Это похоже на то, как вы будете работать с файлами. Является ли использование "Ctrl + Click" недостаточно хорошим?
Демо-код здесь:
<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>
Взгляните на мой ответ на эту тему.
jQuery UI выбирается - выбор нескольких параметров по умолчанию
Он включает полную замену кода для выбираемых ui js, а также изложение необходимых изменений, что делает этот вариант доступным.
используйте этот код, который может помочь вам
$('#selectable').bind("mousedown", function (e) {
e.metaKey = true;
}).selectable('filter : td')
если вы используете выбираемый по таблице для td выбор по выбору ('filter: td') else
использовать selectable()