![]() |
---|
|
Практичные всплывающие подсказки
Прочитав данный урок, Вы сможете с легкостью создавать практичные подсказки на веб страничках. В предыдущих уроках мы уже рассказывали о таких подсказках, но эти отличаются тем, что все всплывающие тексты грузятся из отдельных файлов. Если таких подсказок на странице много, это облегчает код странички, так как врядли посетителям понадобится просмотреть все подсказки. В случае же если какая-либо подсказка его заинтересует, стоит только навести на нее курсор мышки, и она загрузится из внешнего файла. Лучше 1 раз увидеть, чем 100 раз прочитать: Демо версия находится здесь. Файлы можно скачать тут. Для начала рассмотрим варианты оформления таких подсказок в HTML: <a href="ajax4.htm?width=475" class="jTip" id="six" name="Заголовок">Подсказка с заголовком</a> Вот так задается подсказка с заранее определенной шириной и заголовком. Вначале идет ссылка на внешний файл ajax4.htm, далее через знак вопроса прописывается ширина подсказки. Заголок указывается в атрибуте name. <a href="yahoo.htm?width=175&link=https://photoshop-php.ru" name="Прежде чем нажать - прочтите это" id="yahooCopy" class="jTip">Ссылка на photoshop-php.ru</a> А вот так ставится подсказка на ссылку, которая ведет на другую веб страничку. К ширине еще добавляется link=https://photoshop-php.ru. Ширина и заголовок подсказки являются необязательными атрибутами, поэтому можно обойтись и без них (если это необходимо). Для того, чтоб они заработали, нам еще понадобится в начале документа между тегами <head></head> вставить следующий код: <style type="text/css" media="all"> Тут мы подключаем таблицу стилей, фреймворк jQuery и скрипт всплывающих подсказок. Все - как обычно! На сегодня все! Удачи :) Данный урок подготовлен для Вас командой сайта http://ruseller.com
Если хотите не упустить данный урок, добавьте его в закладки:
Рейтинг: ![]()
Поставил. А вместо русского в подсказках - одни квадраты.... Оставить комментарий: |
|
---|
|