web-dev-qa-db-ja.com

jQuery UISelectableを使用して複数の選択を実装する

誰かがjqueryui選択可能ライブラリを使用して次の機能を実行するのを手伝ってもらえますか？

  • ユーザーがマウスクリックで複数のアイテムを選択できるようにする
  • マウスクリックですでに選択されている場合は、アイテムの選択を解除します
jquery-uijquery-ui-selectable
24
HBCondo

これは 別の質問 で回避されていますが、グーグルでこれを見つけた人のためにここに再投稿しています。 jQueryで「mousedown」イベントをバインドしてそこにmetaKeyを設定すると（ユーザーがctrl/cmdキーを押しているかのように）、selectableを呼び出すと、すでに設定されています。

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

Selectableを使用しませんが、これにより、既存のセットアップで必要な動作が得られます。

の代わりに

$( "#selectable" ).selectable()

試してみてください

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

このスレッドで私の答えを見てください。

jQuery UIを選択可能-複数選択をデフォルトにする

これには、選択可能なui jsの完全なコード置換と、必要な変更の概要が含まれているため、これを渡すことができるオプションになっています。

0
passion4code

このコードを使用すると、あなたを助けるかもしれません

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

tdのテーブルでselectableを使用している場合は、selectable（ 'filter：td'）を使用します。else

selectable（）を使用する

0
Rahul Kumar

選択可能なデモページ を確認しましたか？あなたはすでにこれを行うことができます。複数のアイテムを選択するには、コントロールを押し続けます。これは、ファイルを操作する方法と似ています。 「Ctrl +クリック」を使用するだけでは不十分ですか？

ここにデモコード：

<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
JasCav