3
有沒有辦法讓jQuery UI的可選交互進入'多個選擇'(通過左鍵單擊,再次單擊以取消選擇)行爲,而不是點擊到獨佔 - 選擇和取消選擇 - 所有其他行爲?默認情況下,jQuery UI - 多重選擇行爲(ctrl + click)爲'可選'?
有沒有辦法讓jQuery UI的可選交互進入'多個選擇'(通過左鍵單擊,再次單擊以取消選擇)行爲,而不是點擊到獨佔 - 選擇和取消選擇 - 所有其他行爲?默認情況下,jQuery UI - 多重選擇行爲(ctrl + click)爲'可選'?
我覺得這會給你的排序功能,你正在尋找:
1)在最新的jQuery的ui.js的可選()部分中,修改_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」的屬性添加到您的列表元素並將其設置爲「true」。
<ul multi="true">
<li>test1</li>
<li>test2</li>
</ul>
你會看到我添加了一個名爲hasMulti的var,並在兩個條件中使用它來實現所需的行爲。
這將使您可以選擇多個項目(並取消選擇),而不必使用Ctrl +鼠標點擊。
如果我完全誤解了你的問題。然後無視這個帖子。
我自己寫了一些邏輯來模擬這個。很容易。 – Yuvi 2009-08-14 09:35:27
你的意思是像http://stackoverflow.com/questions/9208849/jquery-selectable-customization? – Lijo 2012-02-10 08:20:45
你可能想檢查一下http://stackoverflow.com/questions/4701311/selectable-multiple-sortable-advanced – xar 2012-02-15 01:27:39