У меня проблемы с автозаполнением jquery-ui и слайдером в той же форме (z-index), связанной

Я пытаюсь создать веб-страницу с помощью jQuery ui lib. В моем дизайне используется автозаполнение jQuery ui в поле ввода в верхней части формы. Сразу под этой формой ввода для автозаполнения находятся несколько ползунков jQuery. Проблема в том, что при заполнении поля автозаполнения результаты отображаются за дескриптором ползунка. Это происходит из-за того, что jQuery создает ползунки, которые заставляют их части иметь z-индекс 3. Кажется, что z-индекс раскрывающейся части элемента управления автозаполнением jquery всегда установлен на 1. Я попытался увеличить z. -индекс входного элемента, который автоматически завершается, но, похоже, это не влияет на z-индекс элемента, который jquery создает для раскрывающегося списка автозаполнения. Я также попытался написать свой собственный javascript, чтобы получить элемент раскрывающегося меню по классам (это ul) и вручную установить его z-index. Это тоже не работает. Я предполагаю, что это означает, что каким-то образом код jQuery перезаписывает изменение z-индекса, которое я делаю. Это не ошибка браузера, так как это проблема Firefox, Chrome, Safari и IE. Это проблема с фактическим z-индексом, который jQuery предоставляет в раскрывающемся списке (элемент UL).

Есть ли у кого-нибудь решение этой проблемы? Как вообще можно возиться с элементами, которые jQuery автоматически генерирует для создания элементов управления.


z-index jquery-ui jquery-ui-autocomplete
person TravFisch    schedule 23.08.2010    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Использование событий открытия и закрытия для изменения z-индекса сработало для меня:

$( "#tags" ).autocomplete({
  source: availableTags,      
  open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
  close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});

См. Демонстрацию здесь.

person kgiannakakis    schedule 07.12.2010
comment
Пришлось исправить решение по-другому. Спасибо за ваши старания. - person nuaavee; 13.12.2010
comment
Я новичок в использовании плагинов jQuery, и я пытаюсь расширить свое понимание javascript и jQuery. Чтобы прояснить, что делает это решение, мы перезаписываем функции открытия и закрытия в функции автозаполнения, и эти функции запускаются при событиях открытия и закрытия меню автозаполнения? Я искал в источнике пользовательского интерфейса jQuery (1.8.16) открытые и закрытые обработчики событий по умолчанию в функции автозаполнения, но мне не удалось их найти. - person worker1138; 08.11.2011

arrow_upward
2
arrow_downward

Согласно http://bugs.jqueryui.com/ticket/5238, похоже, что есть 2 решения для этого.

«Изменение z-index на 3, кажется, полностью решает эту проблему».

Вы можете сделать это на своем CSS, вам просто нужно добавить "! Important", чтобы переопределить значение, установленное библиотекой:

ul.ui-autocomplete {
    z-index: 3 !important;
}

Или «установить положение: относительное при автозаполнении, чтобы .zIndex () действительно мог вычислить z-индекс».

person Daniel Bang    schedule 28.01.2012

arrow_upward
0
arrow_downward

Вот что я сделал, чтобы установить z-index для автозаполнения:

$("#myInputId").autocomplete({
    open: function () { $('.ui-autocomplete').css('z-index', 50); },
    source: function (request, response) {
        $.ajax({
            url: "some url",
            type: "POST",
            dataType: "json",
            data: { /* some code... */ },
            success: function (data) { /* some code... */ }
        })
    }
});
person Hooman Bahreini    schedule 20.10.2018