25

jquery uiの選択可能なライブラリを使用して次の機能を実行するのを手伝ってくれる人はいますか:

  • ユーザーがマウス クリックで複数の項目を選択できるようにする
  • マウス クリックでアイテムが既に選択されている場合は、アイテムの選択を解除します
4

5 に答える 5

56

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

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();
于 2011-01-13T21:08:58.190 に答える
2

Selectable は使用しませんが、これにより、既に持っているセットアップで必要な動作が得られます。

それ以外の

$( "#selectable" ).selectable()

試す

$(".ui-widget-content").click( function() {
    $(this).toggleClass("ui-selected");
});
于 2011-03-06T22:09:54.683 に答える
0

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

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

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

于 2011-05-20T18:08:20.810 に答える
0

このコードを使用すると、役に立たない場合があります 

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

td のテーブルで選択可能なものを使用している場合は、selectable('filter : td') を使用します。

selectable() を使用 </p>

于 2012-04-19T08:06:03.517 に答える
0

選択可能なデモページを確認しましたか? あなたはすでにこれを行うことができます。複数の項目を選択するには、Ctrl キーを押したままにします。これは、ファイルの操作方法に似ています。「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>
于 2010-12-14T20:44:26.090 に答える