Выбор нескольких элементов с помощью подключаемого модуля JQuery UI - PullRequest
Новая
       42

Выбор нескольких элементов с помощью подключаемого модуля JQuery UI

0 голосов
/ 10 марта 2012

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

1 Ответ

2 голосов
/ 10 марта 2012

Одно из возможных решений: 

<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 type="text/javascript">
    $(function() {
        $("#selectable").bind("mousedown", function(e) {
            e.metaKey = true;
        }).selectable({
            stop: function() {
                var result = $( "#select-result" ).empty();
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
                    result.append( " #" + ( index + 1 ) );
                });
            }
        });
    });
</script>

<p id="feedback">
    <span>You've selected:</span> <span id="select-result">none</span>.
</p>

<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>
</ol>
...