Как сделать красивые подсказки для ссылок | скрипт qTip | n-wp.ru

Как сделать красивые подсказки для ссылок | скрипт qTip

Иногда мне, чтобы решить какую-то нетипичную задачу, приходится изучать java-скрипты, PHP, CSS. И это не удивительно — бывает проще решить эту задачу внедрением скрипта, нежели чем поиском подходящего плагина. Так и в этот раз получилось — мне нужно было создать красивые, полупрозрачные подсказки, появляющиеся над ссылками. Я прибегнул к уже проверенному методу — использовал jQuery-скрипт qTip.

Как сделать красивые подсказки для ссылок | скрипт qTip

Этот скрипт весьма разносторонний, но меня интересовало только создание красивых всплывающих подсказок над ссылками. Буду предельно краток, и выложу готовый рецепт создания таковых.

Для начала нужно скачать скрипт — он крошечный, всего 3 kb. Я использую упрощенную версию для ссылок.

Скачать
скрипт qTip
вы перейдете по ссылке http://dl.dropbox.com/u/2027201/Wordpress/Scripts/qTip.js

После этого нужно его подключить. Перепишите скрипт в папку с темой (для скриптов я всегда использую папку js в папке с темой). Откройте файл header.php, и до открывающегося тега body вставьте код:

Все, скрипт подключен. Не забудбье проверить, подключена ли библиотека jQuery. Теперь скрипт нужно активировать, чтобы он начал действовать. Для этого откройте файл footer.php, и до закрывающегося тега body вставьте код:

Все, скрипт начал действовать — он автоматически находит ссылки, и если в них есть title, то заменяет стандартные подсказки, которые отображает браузер, на что-то свое. осталось только задать вид всплывающих подсказок. Для этого откройте файл style.css, и вставьте в него примерно следующее:

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

Посмотреть
qTip
вы перейдете по ссылке http://craigsworks.com/projects/qtip/demos/

8 thoughts on “Как сделать красивые подсказки для ссылок | скрипт qTip

  1. Отличная запись, пригодится когда-нибудь, обзательно.
    Только вот прозрачность задавать всему блоку не очень круто — лучше сделлать прозрачным только фон, м?
    background: rgba(255,255,255,0.5)
    выдаст белый фон (первые три числа, RGB, {255,255,255} дадут белый цвет согласно RGB-построению цвета), прозрачный на 50% (последний параметр, aplha, {0.5} даст 50% прозрачности).
    Подробнее о прозрачных фонах — здесь.

          1. Отлично. Вообще, думаю, стоило бы опубликовать запись, в которой был бы опубликован список CSS3-свойств, которые поддерживает IE9. В Твоём стиле. А то Я, когда верстаю, иногда подумываю: а будет ли работать в IE9?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *