2009-08-09 56 views
3

有沒有辦法讓jQuery UI的可選交互進入'多個選擇'(通過左鍵單擊,再次單擊以取消選擇)行爲,而不是點擊到獨佔 - 選擇和取消選擇 - 所有其他行爲?默認情況下,jQuery UI - 多重選擇行爲(ctrl + click)爲'可選'?

+0

我自己寫了一些邏輯來模擬這個。很容易。 – Yuvi 2009-08-14 09:35:27

+0

你的意思是像http://stackoverflow.com/questions/9208849/jquery-selectable-customization? – Lijo 2012-02-10 08:20:45

+0

你可能想檢查一下http://stackoverflow.com/questions/4701311/selectable-multiple-sortable-advanced – xar 2012-02-15 01:27:39

回答

1

我覺得這會給你的排序功能,你正在尋找:

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 +鼠標點擊。

如果我完全誤解了你的問題。然後無視這個帖子。

相關問題