Подсказка как панель инструментов: jQuery, CSS или ...? - PullRequest
Новая
       33

Подсказка как панель инструментов: jQuery, CSS или ...?

3 голосов
/ 22 сентября 2010

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

Вот мои требования:

  • Реализовано в CSS или jQuery (или в обоих)
  • Подсказка отображается через секунду или две после зависания
  • Во всплывающей подсказке есть кнопки для дальнейшего интерфейса
  • При mouseout подсказка остается видимой в течение секунды
  • Подсказка остается видимой на mouseover как триггерного элемента, так и самой подсказки
  • Подсказка может содержать HTML

Вот пример того, что я хотел бы сделать:

alt text

Ответы [ 7 ]

3 голосов
/ 30 сентября 2010

Да, Тейлорджес прав. подсказка info / download Важно отметить, что вы можете включить HTML в эту подсказку. Это означает, что вы можете включать кнопки с событиями нажатия и т. Д. Я не сомневаюсь, что вы сможете настроить это в соответствии со своими требованиями.

Изображение всплывающей подсказки может быть пользовательским, либо использовать одно из их очень приятных.

Вот мой пример:

в JavaScript: 

$("#toolTipBusinessInfo img[title]").tooltip({ effect: 'slide' });

в html: 

<div id="toolTipBusinessInfo" class="pageTitleContainer">
                            <div style="float: left">
                                Business Information</div>
                            <img style="float: left" src="images/question-mark.jpg" alt="?" width="25px" height="25px"
                                title="<p><b>Business Information</b></p>The legal name of the business refers to the name that is reflected on the business license and the name that is used for legal purposes. Legal address reflects the legal address that is used for legal purposes also." />
                        </div>

выглядит так:

alt text

2 голосов
/ 02 октября 2010

Взгляните на qTip

2 голосов
/ 02 октября 2010

Оформление заказа Прототип особенно в режиме Hideafter в демоверсии, которая соответствует вашим требованиям.

Есть множество других, которые вы можете выбрать из здесь

2 голосов
/ 22 сентября 2010

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

1 голос
/ 06 октября 2010

У вас есть несколько интересных вариантов, не относящихся к мейнстриму, которые вы хотели бы изучить, чтобы узнать больше.

Имея в виду доступность и SEO, давайте начнем: создайте подсказки в простом HTML и используйтеCSS / Javascript для отображения их в соответствии с вашими требованиями.

Если вам нужны новые, классные и свежие функции, вы можете использовать переходы CSS3 для отображения / скрытия при наведении курсора мыши.Он хорошо работает в Safari и других новых браузерах (Safari Mobile, Opera Mobile, включены).

Но даже для FF 3.x это решение CSS3 не работает, к сожалению.

ЭтоПозвольте нам с некоторыми кодами javascript / jquery.

На самом деле, ваш запрос напоминает мне еще один очень крутой материал: мега выпадающие меню.

Я впервые прочитал о них в блоке предупреждений Якоба Нильсена:http://www.useit.com/alertbox/mega-dropdown-menus.html

Инструкции по их использованию можно найти на сайте sitepoint.com: http://blogs.sitepoint.com/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

Что ж, нужно сделать облегченный доступный вариант с необработанным HTML и CSS3, а затем улучшитьэто с помощью javascript / jquery.Вы можете пойти дальше, как было сказано, и даже сделать некоторые настройки доступности для мобильных устройств Safari / Android (ну, сафари будет работать только с решением css3, поэтому оно будет зависеть больше от ваших потребностей, чем от доступной технологической инфраструктуры).

0 голосов
/ 30 января 2013

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

Toolbar.js - плагин jQuery для создания адаптивных панелей инструментов стиля подсказок

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

0 голосов
/ 04 октября 2010

Reommendation:

Используйте один из следующих плагинов jQuery:

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

Если касаются сенсорные устройства, либо (a) используйте onclick вместо onmouseover с некоторым визуальным призывом к действию, либо (b) обработайте обнаружение в браузере и создайте альтернативное поведение для сенсорных устройств.

Как всегда, используйте CSS для всех ваших стилей и изображений. Определите классы в своем Javascript, которые вызывают внешний вид, но не вставляйте встроенные стили.

...