Практичные всплывающие подсказки

Прочитав данный урок, Вы сможете с легкостью создавать практичные подсказки на веб страничках.

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

Лучше 1 раз увидеть, чем 100 раз прочитать:

Для начала рассмотрим варианты оформления таких подсказок в HTML:

<a href="ajax4.htm?width=475" class="jTip" id="six" name="Заголовок">Подсказка с заголовком</a>

Вот так задается подсказка с заранее определенной шириной и заголовком. Вначале идет ссылка на внешний файл ajax4.htm, далее через знак вопроса прописывается ширина подсказки. Заголок указывается в атрибуте name.

<a href="yahoo.htm?width=175&amp;link=http://www.ruseller.com" name="Прежде чем нажать - прочтите это" id="yahooCopy" class="jTip">Ссылка на Ruseller.com</a>

А вот так ставится подсказка на ссылку, которая ведет на другую веб страничку. К ширине еще добавляется link=http://www.ruseller.com.

Ширина и заголовок подсказки являются необязательными атрибутами, поэтому можно обойтись и без них (если это необходимо).

Для того, чтоб они заработали, нам еще понадобится в начале документа между тегами <head></head> вставить следующий код:

<style type="text/css" media="all">
  @import "css/global.css";
  </style>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script src="js/jtip.js" type="text/javascript"></script>

Тут мы подключаем таблицу стилей, фреймворк jQuery и скрипт всплывающих подсказок. Все - как обычно!

На сегодня все! Удачи :)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.codylindley.com
Перевел: Максим Шкурупий
Урок создан: 29 Апреля 2009
Просмотров: 45469
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^