Реализация множественного выбора с помощью jQuery UI Selectable - PullRequest
Новая
       40

Реализация множественного выбора с помощью jQuery UI Selectable

24 голосов
/ 09 декабря 2010

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

  • Разрешить пользователю выбирать несколько элементов одним щелчком мыши
  • Отменить выбор элементаесли он уже выбран щелчком мыши

Ответы [ 5 ]

53 голосов
/ 14 января 2011

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

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();
2 голосов
/ 07 марта 2011

Не использует Selectable, но вы получите желаемое поведение с уже имеющимися настройками:

вместо 

$( "#selectable" ).selectable()

попробовать 

$(".ui-widget-content").click( function() {
    $(this).toggleClass("ui-selected");
});
0 голосов
/ 19 апреля 2012

использование этого кода может помочь вам 

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

, если вы используете selectable on table для td's use selectable ('filter: td') else

use selectable()

0 голосов
/ 20 мая 2011

Посмотрите на мой ответ в этой теме.

Выбор интерфейса jQuery - выбор по умолчанию для нескольких вариантов выбора

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

0 голосов
/ 14 декабря 2010

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