jQuery UI – 默认为’selectable’的多选行为(ctrl + click)?
有没有办法让jQuery UI的可选择交互进入“多选”(通过左键单击选择,再次单击以取消选择)行为,而不是单击以排他地选择和取消选择一切其他行为?
我认为这将为您提供您正在寻找的function:
1)在最新的jquery-ui.js的Selectable()部分中,修改_MouseStart函数如下所示:
_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”的属性添加到list元素并将其设置为“true”。
- test1
- test2
您将看到我添加了一个名为hasMulti的var,并在两个条件中使用它来实现所需的行为。
这将使您可以选择多个项目(并取消选择),而无需使用ctrl +鼠标单击。
如果我完全误解了你的问题。 然后忽略这篇文章。
- slick.js出错:“未捕获的TypeError:无法读取属性’添加’为null”
- jQuery在特定网页上定位$(窗口)
- Meteor的Session.set导致JQuery代码问题?
- Jquery Validator – 根据接受的值列表检查输入
- zClip不起作用 – 多个副本到剪贴板JS
- 当我试图在动态加载的元素上触发点击事件时,我在jQuery 1.8中不断收到错误“Object# on’on’
- 如何通过jquery中的.on函数在多个选择器上附加不同的事件?
- JS从文本框中抓取文本,传递给asp.net mvc ActionResult,但ActionResult参数显示为null
- 为什么javascript会在我的索尼爱立信C510浏览器上运行,而不是javascript + jquery?