Автозаполнение JQuery UI не прокручивается с помощью клавиш со стрелками в Firefox - PullRequest
Новая
       22

Автозаполнение JQuery UI не прокручивается с помощью клавиш со стрелками в Firefox

8 голосов
/ 13 августа 2011

Я работаю с JQuery UI autocomplete 1.8 с JQuery 1.6.1.(Получение новых версий программного обеспечения в моей компании чрезвычайно сложно, поэтому я застрял с ними.)

У меня длинный список строк, помещенных в панель автозаполнения, поэтому я разработал класс .ui-autocomplete следующим образом

.ui-autocomplete {height:200px; overflow-y:scroll; overflow-x: hidden;}

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

В тестах вне работы, где у меня есть доступ к другим браузерам, я обнаружил, что Chrome прокручивается правильно и IE 8 прокручивается правильно.Это ошибка в браузере Firefox 3.6 для Linux или я что-то упустил?

Я наручники на Firefox 3.6 ua: (Mozilla / 5.0 (X11; U; Linux i686 (x86_64); en-US; rv1.9.2.12) Gecko / 20101026 Firefox / 3.6.1.2)

Это ошибка в этой версии браузера или я что-то упустил?

РЕДАКТИРОВАТЬ: я смог найти машину с ie6 и один с Firefox 3.5.3.ie6 прокрутил и firefox 3.5.3 не сделал.Похоже, что это может быть проблема с Firefox.

Ответы [ 3 ]

5 голосов
/ 29 ноября 2012

У меня была похожая проблема с нашим приложением, работающим на jQuery v1.7.2 и jQuery UI v1.8.11 в любом браузере. Однако я обнаружил, что это было исправлено в jQuery UI v1.8.13 changelog .

Таким образом, в соответствии с исправлением в наборе изменений, все, что я сделал, это просто переопределил две функции, как показано ниже, и это решило проблему. 

$.widget("ui.menu", $.extend({ }, $.ui.menu.prototype, {
activate: function (event, item) {
    this.deactivate();
    if (this.hasScroll()) {
        var offset = item.offset().top - this.element.offset().top,
            scroll = this.element.scrollTop(),
            elementHeight = this.element.height();
        if (offset < 0) {
            this.element.scrollTop(scroll + offset);
        } else if (offset >= elementHeight) {
            this.element.scrollTop(scroll + offset - elementHeight + item.height());
        }
    }
    this.active = item.eq(0)
                      .children("a")
                      .addClass("ui-state-hover")
                      .attr("id", "ui-active-menuitem")
                      .end();
    this._trigger("focus", event, { item: item });
},

hasScroll: function () {
    return this.element.height() < this.element[$.fn.prop ? "prop" : "attr"]("scrollHeight");
}}));
2 голосов
/ 21 декабря 2011

Решение: Обновление до jQuery UI 1.8.18 устранило эту проблему для меня.

Это не ответ, но он может предоставить больше информации по проблеме. Если вы следите за вызовами при нажатии клавиш «вверх» или «вниз» при открытом меню, вы попадаете в метод активации виджета меню, который вызывает метод hasScroll (строка 5487 с использованием v1.8.11); 

hasScroll: function() {
    return this.element.height() < this.element.attr("scrollHeight");
},

Кажется, что проблема в том, что атрибут scrollHeight не определен для элемента ul меню, и поэтому этот метод всегда возвращает false.

Вот метод активации: 

activate: function( event, item ) {
        this.deactivate();
        if (this.hasScroll()) {
            var offset = item.offset().top - this.element.offset().top,
                scroll = this.element.attr("scrollTop"),
                elementHeight = this.element.height();
            if (offset < 0) {
                this.element.attr("scrollTop", scroll + offset);
            } else if (offset >= elementHeight) {
                this.element.attr("scrollTop", scroll + offset - elementHeight + item.height());
            }
        }
        this.active = item.eq(0)
            .children("a")
                .addClass("ui-state-hover")
                .attr("id", "ui-active-menuitem")
            .end();
        this._trigger("focus", event, { item: item });
    }

Даже если вы заставите метод hasScroll возвращать true, вы столкнетесь с другой проблемой, так как атрибут scrollTop также не определен.

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

0 голосов
/ 01 марта 2012

Я заметил, что this.element.attr("scrollHeight") в 

hasScroll: function () {
        return this.element.height() < this.element.attr("scrollHeight");
    },

возвращает undefined .Если вместо этого вы измените this.element.attr("scrollHeight") на this.element.prop("scrollHeight"), вы получите scrollHeight.

Но тогда такая же проблема появится в activate: function (event, item) {, поэтому вам также потребуется изменить все вхождения

this.element.attr("scrollTop") до this.element.prop("scrollTop")

в этой функции, чтобы заставить ее работать.

Вы можете прочитать о .prop () в jQuery API , но в основномПричиной этого является

До jQuery 1.6 метод .attr () иногда учитывал значения свойств при получении некоторых атрибутов, что могло вызвать противоречивое поведение.Начиная с jQuery 1.6, метод .prop () предоставляет способ явного получения значений свойств, в то время как .attr () возвращает атрибуты.

...