Всплывающая подсказка на основе Coda Popup Bubbles

Скрипты

Рисунок Всплывающая подсказка на основе Coda Popup Bubbles
Всплывающая подсказка на основе Coda Popup Bubbles Всплывающая подсказка на основе Coda Popup Bubbles
оценка: 4.4 из 5
оценок: 25, отзывов: 2
количество посетителей: 75

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

Сам код плагина Coda Popup Bubbles я перебрал и убрал некоторые ошибки по позиционированию подсказки.

Для начала займемся подключением скрипта. Так Coda Popup Bubbles - это плагин для jQuery, нужно будет подключить и его. Скачать скрипт Coda Popup Bubbles можно здесь. Откройте ссылку и сохраните файл на компьютере. Затем залейте к себе на сайт. Подключить скрипт можно следующим кодом (код ставим в раздел HEAD страницы):

Code
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<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:

Code
<style type="text/css">
  .bubbleInfo{position: relative;}
  .popup{position: absolute; display: none; z-index: 50; background: #fff; border: 2px solid #f00;}
</style>

Теперь займемся блоками. Блок с подсказкой должен отвечать определенным правилам и выглядит так:

Code
<div class="bubbleInfo">
  <div class="trigger">тут текст или картинка, при наведении на которую появится подсказка</div>
  <div class="popup">Тут сама подсказка</div>
</div>

Этот блок можно ставить в любое место страницы в пределах тега BODY. Основное правило: структуру блока и классы менять нельзя.

Блок с классом trigger - это блок триггер. При наведении курсора на этот блок будет всплывать подсказка, которая оформлена в блоке с классом popup. Внутри блок popup можно оформить так, как вы желаете. В примере сверху использована таблица с рисунком в качестве фона. Вы можете сделать что нибудь свое.

На этом установка всплывающей подсказки на основе Coda Popup Bubbles закончена. Пользуйтесь и удачи в свершениях!

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




Всплывающая подсказка на основе Coda Popup Bubbles
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:9841
Рейтинг:4.4/25
Дата добавления:2009-11-28 16:11, Суббота
Добавил:Szen
Теги:jQuery, popup, подсказка

Мини-форум

№ 02009-11-28 16:11
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Всплывающая подсказка на основе Coda Popup Bubbles".
Гость
№ 1
2010-07-05 11:18 Спам
Apocalypse
Аватар участника Apocalypse
Ссылка на скрипт http://szenprogs.ru/scripts/coda_popup/jquery.coda-bubble.sp.js битая... Подправьте smile
Ярослав
№ 2
2010-07-05 12:44 Спам
Szen
Аватар участника Szen
Apocalypse, как ни странно, но ссыль активная и рабочая. wink
Скрипт на месте и никуда не перемещался.
Szen
Учавствовать в обсуждении "Всплывающая подсказка на основе Coda Popup Bubbles" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Какой JavaScript фреймворк вы изпользуете?
Всего ответов: 147
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 9
Гостей: 7
Пользователей: 2

SergeyDut, oi_bogidanov1965
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz