jQuery UI-默认情况下,“选择"的多项选择行为(ctrl + click)? [英] jQuery UI - Multiple Select behavior (ctrl+click) by default for 'selectable'?
问题描述
是否有一种方法可以使jQuery UI的Selectable交互进入多次选择"(通过左键单击,再次单击以取消选择)行为,而不是单击仅选择并取消选择"的所有行为,还有其他行为吗?
Is there a way to make the jQuery UI's Selectable interaction go into 'multiple selects' (select via left click, click again to unselect) behavoir, rather than the click-to-exclusively-select-and-unselect-everything-else behavior?
推荐答案
我认为这将为您提供所需的功能:
I think this will give you the sort of functionality you are looking for:
1)在最新的jquery-ui.js的Selectable()部分中,将_MouseStart函数修改为如下所示:
1) In the Selectable() section of the latest jquery-ui.js, modify the _MouseStart function to look like this:
_mouseStart: function(event) {
var self = this;
this.opos = [event.pageX, event.pageY];
if (this.options.disabled)
return;
var options = this.options;
this.selectees = $(options.filter, this.element[0]);
this._trigger("start", event);
$(options.appendTo).append(this.helper);
// position helper (lasso)
this.helper.css({
"left": event.clientX,
"top": event.clientY,
"width": 0,
"height": 0
});
if (options.autoRefresh) {
this.refresh();
}
var hasMulti = false;
if(this.element.attr("multi") == undefined || !eval(this.element.attr("multi")))
{
hasMulti = true;
}
this.selectees.filter('.ui-selected').each(function() {
var selectee = $.data(this, "selectable-item");
selectee.startselected = true;
if (!event.metaKey) {
if(hasMulti)
{
selectee.$element.removeClass('ui-selected');
selectee.selected = false;
selectee.$element.addClass('ui-unselecting');
selectee.unselecting = true;
// selectable UNSELECTING callback
self._trigger("unselecting", event, {
unselecting: selectee.element
});
}
}
});
$(event.target).parents().andSelf().each(function() {
var selectee = $.data(this, "selectable-item");
if (selectee) {
var doSelect = false;
if(hasMulti)
{
doSelect = !event.metaKey || !selectee.$element.hasClass('ui-selected');
}
else
{
doSelect = !selectee.$element.hasClass('ui-selected');
}
selectee.$element
.removeClass(doSelect ? "ui-unselecting" : "ui-selected")
.addClass(doSelect ? "ui-selecting" : "ui-unselecting");
selectee.unselecting = !doSelect;
selectee.selecting = doSelect;
selectee.selected = doSelect;
// selectable (UN)SELECTING callback
if (doSelect) {
self._trigger("selecting", event, {
selecting: selectee.element
});
} else {
self._trigger("unselecting", event, {
unselecting: selectee.element
});
}
return false;
}
});
}
2)然后,在您的标记中,将一个名为"multi"的属性添加到您的列表元素,并将其设置为"true".
2) Then, in your markup, add an attribute called "multi" to your list element and set it to "true".
<ul multi="true">
<li>test1</li>
<li>test2</li>
</ul>
您将看到我添加了一个名为hasMulti的变量,并在两个条件中使用了该变量以实现所需的行为.
You will see I added a var called hasMulti and used it in two conditionals to achieve the desired behavior.
这将使您可以选择多个项目(并取消选择),而无需使用ctrl +鼠标单击.
This will make it so that you can selected multiple items (and unselect) without having to use ctrl + mouse click.
如果我完全误解了您的问题.然后忽略此帖子.
If I totally misinterpreted your question. Then disregard this post.
这篇关于jQuery UI-默认情况下,“选择"的多项选择行为(ctrl + click)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!