Подсказки на jQuery для ссылок

В этом уроке мы создадим подсказки на jQuery для ссылок.

demosourse

Шаг 1.

Подключим скачанные скрипты, прописав их между тегами <head>

<script type="text/javascript" src="example/jQuery.js"></script>
<script type="text/javascript" src="example/qtip.js"></script>

После всего контента страницы (или перед закрывающимся тегом </body>) вставим следующий скрипт:

<script type="text/javascript">

      $(document).ready(function()

      {

$('a[title]').qtip({

position: {

corner: {

target: 'bottomRight',

tooltip: 'topLeft'

}

},

style: {

name: 'blue',

padding: '7px 13px',

width: {

max: 200,

min: 0

},

tip: true

}

});

});

</script>

Шаг 2.

В зависимости от того, какой цвет подсказок мы хотим видеть на странице, исправим параметр name в этом скрипте. Он может принимать следующие значения:

Если вам эти цвета не подходят, их можно поменять, найдя соответствующий стиль в файле скрипта qtip.js и исправив цвета на свои.

Вот пример стиля "Dark":

 dark: {

border: {

width: 3,

radius: 0,

color: '#303030'

},

title: {

background: '#404040',

color: '#f3f3f3'

},

background: '#505050',

color: '#f3f3f3',



classes: { tooltip: 'qtip-dark' }

}

Чтобы поменять положение носика (уголка) подсказки, в шаге №1 нам нужно исправить параметр tooltip. Он может принимать следующие значения:

Чтобы обозначить место появления подсказки относительно объекта, поменяем значение target. Оно может принимать те же значения, что и уголок.

Шаг 3.

В том месте, где мы хотим видеть подсказку, добавим ссылке элемент title.

Например:

<a href="http://ruseller.com/" title="Пример всплывающей подсказки">Наведите курсор сюда</a>

если же ссылкой будет картинка, то код будет такой:

<a href="http://ruseller.com/" target="_blank" title="Привет!" ><img src="friend.jpg" width="90" height="68" />

Вот и все! Удачного использования подсказок!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.craigsworks.com
Перевел: Сергей Патин
Урок создан: 22 Апреля 2009
Просмотров: 41546
Правила перепечатки

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

^ Наверх ^