Реализуйте несколько вариантов выбора с помощью пользовательского интерфейса jQuery, который можно выбрать

StackOverflow https://stackoverflow.com/questions/4396042

  •  10-10-2019
  •  | 
  •  

Вопрос

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

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

Решение

Это работает в Другой вопрос, но я репостирую здесь всех, кто находит это через Google. Если вы связываете событие «Mousedown» в JQUERY и установите там Metakey (как если бы пользователь удерживает клавишу CTRL/CMD), то, когда вы выберите выбираемый, он уже будет установлен. 

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).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 selectable - создание нескольких выборов по умолчанию

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

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

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

если вы используете выбираемую таблицу on для td, используйте выбираемый ('фильтр :td') остальное

использовать выбираемый()​

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top