Интерфейс Jquery UI 1.9 - Как вы выделяете активный пункт меню?

Question

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

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

Я экспериментировал с добавлением стандартного класса jquery ui css "ui-state-active", который применяет определенный CSS к элементу в меню данного класса. Тем не менее, при наведении курсора на любой другой элемент этот активный класс пользовательского интерфейса удаляется из активного элемента, что фактически заставляет указатель мыши убить активный выбор, даже если новый выбор еще не сделан (щелчком мыши).

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

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

Answer 1

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

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

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

Answer 2

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