Реализовать несколько вариантов выбора с помощью jQuery UI

может ли кто-нибудь помочь мне использовать библиотеку jQuery ui для выполнения следующих функций:

  • разрешить пользователю выбирать несколько элементов с помощью мыши
  • - де-выберите элемент, если он уже выбран с помощью мыши
24
jquery-ui jquery-ui-selectable

5 ответов

это обрабатывается в еще вопрос, но я перепечатываю здесь для всех, кто находит это через google. Если вы свяжете событие" mousedown " в jQuery и установите metaKey там (как если бы пользователь держал клавишу ctrl/cmd), то при вызове selectable он уже будет установлен. 

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

не использует выбор, но это даст вам поведение, которое вы хотите с настройкой у вас уже есть:

вместо

$( "#selectable" ).selectable()

попробовать

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

вы проверили демо-страница для дискретных? Ты уже можешь это сделать. Чтобы выбрать несколько элементов, просто держать контроль. Это похоже на то, как вы будете работать с файлами. Использование "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>
0

взгляните на мой ответ в этой теме.

jQuery UI выбирается-создание множественного выбора по умолчанию

Он включает в себя полную замену кода для выбираемого ui js, а также изложение необходимых изменений, что делает эту опцию, которая может быть передана.

0

использовать этот код может быть ot поможет вам 

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

Если вы используете selectable на таблице для td, то польза дискретная ('фильтр : td') else

используйте selectable ()

0