2010-10-15 2 views
11

Кто-нибудь знает, есть ли способ настроить элемент jquery ui, чтобы отменить выбор выбранного элемента при его нажатии? Похоже, как переключатель. Если он уже выбран, отмените его выбор, иначе выполните поведение по умолчанию.jQuery UI Selectable - отменить выбор выбранного элемента при нажатии

Спасибо.

ответ

35

я очень поздно в ответ на ваш вопрос, но позвольте мне ответить на него в любом случае таким образом, чтобы сохранить его в качестве эталона для других.

$(".selector").bind("mousedown", function (e) { 
    e.metaKey = true; 
}).selectable(); 

Это позволит использовать поведение переключателя, которое вы ищете.

+0

Спасибо за обмен. Это хорошо работает. – fehays

+2

Я вижу, что он работает как ожидалось, но, честно говоря, я не понимаю, как это сделать! можете ли вы объяснить, почему этот код работает (я имею в виду, как он не выбирается при втором нажатии?) – HungryCoder

+3

Это просто добавляет metaKey (Ctrl) в событие «mousedown», которое заставляет такое же поведение, как если бы вы нажали Ctrl самостоятельно , – Novalis

0

Это вы имеете в виду?

Это событие запускается в конце операции выбора, на каждом элементе, удаленном от выбора.

примеров кода

питания функция обратного вызова для обработки невыбранного события в качестве опции инициализации.

$(".selector").selectable({ 
    unselected: function(event, ui) { ... } 
}); 
Bind to the unselected event by type: selectableunselected. 
$(".selector").bind("selectableunselected", function(event, ui) { 
    ... 
}); 

Источник:

http://jqueryui.com/demos/selectable/#event-unselected

+0

Ну, что мне нужно, это вызвать это невыделенное событие при щелчке по выбранному элементу. Прямо сейчас это событие срабатывает только при нажатии другого выбираемого элемента. – fehays

11

Ну вот, что я только что в конечном итоге делает. Я использовал имя класса для переключения и отмены выбора. Я хотел бы услышать, если есть другой вариант:

$("#selectable").selectable({ 
    selected: function (event, ui) { 
     if ($(ui.selected).hasClass('selectedfilter')) { 
      $(ui.selected).removeClass('selectedfilter'); 
      // do unselected stuff 
     } else {    
      $(ui.selected).addClass('selectedfilter'); 
      // do selected stuff 
     } 
    }, 
    unselected: function (event, ui) { 
     $(ui.unselected).removeClass('selectedfilter'); 
    } 
}); 
+0

Ahh ok теперь я получаю то, что вы делаете! Прости! – Trufa

+0

Без проблем @Trufa. Я уверен, что не очень хорошо объяснил это. Спасибо, что пытались помочь. – fehays

+1

Обратите внимание, что для переключения имени класса вы можете просто использовать 'toggleClass ("selectedFilter")'. Нет необходимости проверять, имеет ли элемент класс. ToggleClass делает это для вас. – Kriem

2

Если вы хотите, чтобы существующие выборы будут сохранены и все же иметь операцию переключения, вам нужно просто игнорировать невыделенное событие для решения данного. Также вам нужно удалить выбранный ui класс.

$("#selectable").selectable({ 
selected: function (event, ui) { 
    if ($(ui.selected).hasClass('selectedfilter')) { 
     $(ui.selected).removeClass('selectedfilter').removeClass('ui-selected'); 
     // do unselected stuff 
    } else {    
     $(ui.selected).addClass('selectedfilter').addClass('ui-selected'); 
     // do selected stuff 
    } 
} 
}); 
Смежные вопросы