Получить/установить меню пользовательского интерфейса jQuery для активного элемента пользовательского интерфейса

Мне нужно сделать несколько выпадающих меню, используя меню пользовательского интерфейса jQuery. До этого мы использовали jQuery UI Selectmenu для этих целей.

Меню выбора было основано на select, где можно использовать метод val() для получения/установки значения выбора. Теперь меню основано на ul/li, и поэтому у меня нет такой опции.

Поэтому мне нужно как-то подражать следующему поведению:

someMenu.menu();
//....                
someMenu.val(someValue);
someMenu.menu("refresh");

Я попытался расширить виджет меню и добавить некоторые методы, такие как:

 $.widget("market.multiDropdownMenu",$.ui.menu, {
    //....
    getSelectedItem: function () {
        return this.active;             
    },

    setSelectedItem: function(elem){
        var elem = this.element.find(elem).first();
        if (elem) {
            this.active = elem;
            this.focus('focus', elem);
            this.element.find('.ui-menu-item.selected').removeClass('selected');
            this.getSelectedItem().addClass('selected');  
        }
    },
    //....
}

А затем использовать его как:

// for getter
var elem = someMenu.multiDropdownMenu("getSelectedItem"); // getting null
// and for setter
var newElem = ...
someMenu.multiDropdownMenu("setSelectedItem", newElem);
someMenu.multiDropdownMenu("refresh");

Но после установки некоторого значения и попытки вернуть его в следующий раз поле active будет null.

Я также безуспешно пытался использовать elem.trigger('click'); вместо события focus.


javascript jquery jquery-ui jquery-ui-menu jquery-ui-selectmenu
person marknorkin    schedule 19.10.2015    source источник
comment
Вместо изменения виджета рассмотрите альтернативу, которая была разработана специально для поддержки вложенных уровней: users.tpg.com.au/j_birch/plugins/superfish   -  person Yang    schedule 19.10.2015

Ответы (1)


arrow_upward
3
arrow_downward

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

Установить выбранный:

$( "#menu" ).menu({
    select: function(event, ui) {
        $('.selectedItem').removeClass('selectedItem');
        $(event.currentTarget).addClass('selectedItem');

    }
});

Получить выбранное значение:

$('.selectedItem').text();

Скрипка

person ioums    schedule 19.10.2015
comment
да, мне подходит вариант с event.currentTarget и присоединением класса css market. спасибо, что выручили меня! - person marknorkin; 20.10.2015