Всплывающая подсказка на основе Coda Popup Bubbles
Скрипты
Всплывающая подсказка на основе Coda Popup Bubbles
| ||||||||||||||||
Создаем всплывающую подсказку на базе плагина к jQuery Coda Popup Bubbles. Внешний вид подсказки целиком зависит от вашей фантазии и умений. В нее можно вставить как таблицу, так и картинки или информер. Вы сами определяете, при наведении на что должна выходить подсказка и что будет в ней.
Сам код плагина Coda Popup Bubbles я перебрал и убрал некоторые ошибки по позиционированию подсказки.
Для начала займемся подключением скрипта. Так Coda Popup Bubbles - это плагин для jQuery, нужно будет подключить и его. Скачать скрипт Coda Popup Bubbles можно здесь. Откройте ссылку и сохраните файл на компьютере. Затем залейте к себе на сайт. Подключить скрипт можно следующим кодом (код ставим в раздел HEAD страницы):
<script src="http://szenprogs.ru/scripts/coda_popup/jquery.coda-bubble.sp.js" type="text/javascript"></script>
Если ваш сайт создан на основе системы UCOZ, то первую строку скрипта можно не ставить. jQuery на UCOZ подключен по умолчанию.
Все, скрипт подключен. Теперь подготовим таблицу стилей CSS для правильного отображения подсказок Coda Popup Bubbles. Стили можно прописать как в файле CSS, так и в теге STYLE, который нужно разместить в разделе HEAD. Представленный код предназначен для размещения его в теле HEAD:
.bubbleInfo{position: relative;}
.popup{position: absolute; display: none; z-index: 50; background: #fff; border: 2px solid #f00;}
</style>
Теперь займемся блоками. Блок с подсказкой должен отвечать определенным правилам и выглядит так:
<div class="trigger">тут текст или картинка, при наведении на которую появится подсказка</div>
<div class="popup">Тут сама подсказка</div>
</div>
Этот блок можно ставить в любое место страницы в пределах тега BODY. Основное правило: структуру блока и классы менять нельзя.
Блок с классом trigger - это блок триггер. При наведении курсора на этот блок будет всплывать подсказка, которая оформлена в блоке с классом popup. Внутри блок popup можно оформить так, как вы желаете. В примере сверху использована таблица с рисунком в качестве фона. Вы можете сделать что нибудь свое.
На этом установка всплывающей подсказки на основе Coda Popup Bubbles закончена. Пользуйтесь и удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Всплывающая подсказка на основе Coda Popup Bubbles
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 11710 |
| Рейтинг: | 4.4/25 |
| Дата добавления: | 2009-11-28 16:11, Суббота |
| Добавил: | Szen |
| Теги: | jquery, Popup, подсказка |
Рекомендуем
Дополнительно к Всплывающая подсказка на основе Coda Popup Bubbles
Мини-форум
| № 0 | 2009-11-28 16:11 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Всплывающая подсказка на основе Coda Popup Bubbles". |
| Гость |
| № 1 | 2010-07-05 11:18 |
Apocalypse | Ссылка на скрипт http://szenprogs.ru/scripts/coda_popup/jquery.coda-bubble.sp.js битая... Подправьте  |
| Ярослав |
| № 2 | 2010-07-05 12:44 |
Szen | Apocalypse, как ни странно, но ссыль активная и рабочая.  Скрипт на месте и никуда не перемещался. |
| Szen |
