25

谁能帮我使用 jquery ui 可选库来执行以下功能：

  • 允许用户通过鼠标单击选择多个项目
  • 如果已通过鼠标单击选择项目，则取消选择该项目
4

5 回答 5

56

这在另一个问题中得到了解决，但我在这里为任何通过谷歌找到这个的人转发。如果你在 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

您是否检查了演示页面是否可以选择？你已经可以这样做了。要选择多个项目，只需按住控制。这类似于您处理文件的方式。使用“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>
于 2010-12-14T20:44:26.090 回答
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，则使用 selectable('filter : td')​ else

使用 selectable()​</p>

于 2012-04-19T08:06:03.517 回答