Меню Jquery UI 1.9. Как выделить активный элемент меню?

Я использую API-интерфейс Jquery UI "Menu" для создания меню навигации в приложении.

Меню отлично рисуется и связывается, и при наведении на него применяется естественный jquery ui css, присваивая наведенным элементам класс ui-state-focus. Когда вы перемещаете мышь от элемента, он удаляет этот класс, что переводит элемент в невыделенное состояние по умолчанию.

Я экспериментировал с добавлением стандартного класса jquery ui css «ui-state-active», который применяет определенный CSS к элементу в меню, данному этому классу. Однако при наведении курсора на любой другой элемент этот класс ui-state-active УДАЛЕН из активного элемента, что фактически приводит к тому, что наведение курсора уничтожает активный выбор, даже если новый выбор еще не сделан (щелчком).

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

Любые идеи о том, как правильно помечать элементы, активные в API меню пользовательского интерфейса jquery?


menu jquery jquery-ui jquery-ui-menu jqui
person Rimer    schedule 06.03.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я бы предложил создать отдельный класс для выбранного элемента (вы можете скопировать существующий ui-state-active и переименовать его во что-то вроде выбранного), а затем:

    $("#menu").find("a").click(function(){
    $("#menu").find("a").removeClass("selected");//remove if something was selected
    $(this).addClass("selected");//add a selected class
    });

надеюсь, это поможет

person KoSMoS    schedule 06.03.2013
comment
Веселый. Я ТОЛЬКО сделал это, как вы ответили. Я создал совершенно другой класс, которого нет в пользовательском интерфейсе JQ, чтобы API меню пользовательского интерфейса JQ не удалял его. - person Rimer; 06.03.2013

arrow_upward
0
arrow_downward 

jQuery.widget("ui.menu", jQuery.ui.menu, {
    blur: function( event, fromFocus ) {
        if (event && event.type === "mouseout"))
            return this;
        else 
            return this._super(event, fromFocus);
    } 
});

работает только с jQuery >= 1.9

person Samuele Diella    schedule 17.06.2014
comment
извините, может быть, я неправильно понял проблему. я работал над тем, чтобы потерять фокус, а не закрыться ^^ я прочитал это позже и заметил, что, может быть, вы подумывали о закрытии ^^ - person Samuele Diella; 17.06.2014
comment
попробуйте так: if ((event === undefined && fromFocus === undefined) || (event && event.type === mouseout)) - person Samuele Diella; 17.06.2014