Squeak.ru - шаблоны программирования

всплывающая подсказка для скрытого элемента выбора не работает

Я разрабатываю веб-сайт с помощью combobox из пользовательского интерфейса jquery, все работает нормально. Но когда я попытался применить всплывающую подсказку к выбранному элементу, всплывающая подсказка не работает.

HTML:

<select id="combobox_courses" title="tooltip test text" style="display: none;">

Вся проблема в том, что cs jquery combobox переопределяет выбор отображения стиля css в скрытом и изменяет его с помощью чего-то вроде этого: <span class="ui-combobox"> <input class="ui-state-default ui-autocomplete-input ....

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

$("selector").anytooltip({settings});

Использование селектора классов, например .ui-combobox, тоже не работает.

Любые идеи, как решить эту проблему? Извините, я новичок в Jquery, и может быть вопрос простой, спасибо за вашу помощь...

РЕШЕНО!

так что если у кого-то есть такая проблема - js:

$(документ).готовый(функция(){

$('#wrapper').tipsy({ trigger: 'manual', gravity: 'n'});

$( "#combobox" ).combobox();
$("#wrapper input").bind("click", function() {
      $("#wrapper").tipsy('show');
}).bind("focusout",function(){
      $("#wrapper").tipsy('hide');
}); });

где #wrapper является оболочкой исходного элемента выбора поля со списком:

<div class="ui-widget">
    <div id="wrapper" title="test wrapper">
    <label>Your preferred programming language: </label>
    <select id="combobox">
        <option value="">Select one...</option>
    </select>
</div></div>

если $(#wrapper input).bind(...); не работает, просто добавьте диапазон - $(#wrapper span input).bind(...);

tipsy — бесплатный плагин всплывающих подсказок для jquery.

большое спасибо @tpaksu за помощь!


  • Вы пытаетесь отобразить всплывающую подсказку скрытого элемента?? 17.05.2012
  • Да на самом деле. Задача состоит в том, чтобы показать всплывающую подсказку для выбранного элемента выпадающего списка jquery. Зло заключается в том, что jquery UI автозаполняет исходный элемент select с собственным кодом (span, input и т. д.) и фактически скрывает начальный элемент :( вы можете увидеть это здесь - jqueryui.com/demos/autocomplete/combobox.html 17.05.2012
  • Вы пытались добавить всплывающую подсказку к содержащему элементу (например, P, DIV) вместо самого SELECT? 17.05.2012
  • Как посоветовал Тпаксу ниже так и делаю, но мне кажется не гибкое и грубое решение... но лучше чем ничего :) 17.05.2012

Ответы:


1
<select id="combobox_courses" title="tooltip test text" style="display: block;">

или попробуй получить спэн и кто обернет твой выбор и получи всплывающую подсказку по нему

16.05.2012
  • Спасибо за ваш ответ, но это не сработает, плагин cs jquery combobox переопределяет исходный html - и свойство отображения не должно быть для нормальной работы этого плагина, проверьте его на jqueryui.com/demos/autocomplete/combobox.html 17.05.2012
  • Я написал, что span и wrap не работают... Я не мог привязать всплывающую подсказку к этим селекторам, она просто не работает :( 17.05.2012

  • 2

    вы можете обернуть этот элемент другим контейнером и установить всплывающую подсказку для этого элемента следующим образом:

    <div id="combo_container">
        <select id="combobox_courses" title="tooltip test text" style="display: none;">
    </div>
    

    Затем вы можете определить всплывающую подсказку для этого элемента контейнера:

    $("#combo_container").anytootip({options});
    
    16.05.2012
  • Спасибо, это работает. Но немного грубое решение ... cs, например, у меня есть 2 поля выбора автозаполнения с вводом, и мне нужно привязать событие focusout к первому, чтобы показать всплывающую подсказку на втором, когда фокус переходит ко второму, с ложными контейнерами со списком я не мог сделать это правильно? 17.05.2012
  • вы можете использовать события со списком, такие как $( ".selector" ).autocomplete({ open: function(event, ui) { ... } });, чтобы активировать фокус всплывающей подсказки. 17.05.2012
  • Отличная идея, это может сработать :). В другом случае, я думаю, мне следует переписать скрипт combobox/autocomplete, чтобы исправить это более гибким способом? 17.05.2012
  • я думаю, вы можете делать в основном с событиями. изменение стабильного кода может сломать что-то еще, чего вы не видите. 17.05.2012
  • пытался связать некоторые события, как вы сказали, но безуспешно, не могли бы вы привести пример? Пробовал - $(document).ready(function(){ $( "#municipality_cb" ).combobox({ focus: function(event, ui) { //tipTip(); - tooltip script// $("#municipality_wrap").tipTip({maxWidth: "auto", edgeOffset: 10}); } }); }); что я делаю не так? 19.05.2012
  • вы воссоздаете всплывающую подсказку, я думаю. Должен быть метод для запуска события показа всплывающей подсказки. не восстанавливайте всплывающую подсказку. показать существующий. 19.05.2012
  • попробуйте изменить событие, чтобы открыть вместо фокуса. 19.05.2012
  • попробовал, не могли бы вы взглянуть на jsfiddle.net/wNnTQ/138? все равно не работает :(( 19.05.2012

  • 3

    Вы можете добавить некоторый элемент-оболочку с заголовком и добавить ui-combobox к этой оболочке.

    $('element').combobox({
      appendTo: 'elementWithTitle'
    });
    
    16.05.2012
    Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...