Рубрика: ‘Технологии jQuery’

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

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

Согласитесь, что стандартные html подсказки выглядят не очень красиво, поэтому были придуманы различные способы их модификации. Вообще, я заметил в интернете три способа показа всплывающих подсказок(с помощью jQuery): Подробнее »

Если подсказка содержит большое количество информации, чтобы показать её, Вам не придется громоздить атрибут title и «загрязнять» HTML код. Содержание будет определено в свой собственный элемент HTML. Форма подсказке придаётся с помощью CSS. Гибкое позиционирование контента. Простое и легкое решение. Этот jQuery плагин не пытается сделать всё для Вас, но своих целей, на мой взгляд, он достиг. О том, какие ещё бывают всплывающие подсказки можно узнать перейдя по ссылке.

Принцип работы

HTML разметка. Нам нужно два элемента, один целевой, на который пользователь наводит мышь и один для содержания подсказки. Обратите внимание на атрибуты идентификаторов(id). Они не должны быть одинаковыми.

<span id="example-target-1">Наведи курсор на меня</span>
<div id="example-content-1">Содержание подсказки</div>

Информация может храниться не только в контейнерах div, но для этих целей подходит любой другой html блок. Например мы можем легко использовать изображение в виде всплывающей подсказки, сделав что-то вроде этого: Подробнее »

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

Для того,чтобы показывать всплывающие подсказки с помощью атрибута title необходимо добавить соответствующую html разметку. Вот как она будет выглядеть: Подробнее »

Представляю Вашему вниманию навигационное меню, основанное на принципах jQuery. Мы создадим его, а после «оживим» с помощью придания ему некоторых эффектов. Вот демо анимированного меню, которое получится у нас в итоге.

Здесь имеются элементы, так называемой «плавной» анимации или ослабления(easing). То есть, мы можем видеть постепенное ускорение или замедление во время работы меню, которое помогает Вашей анимации выглядеть более реалистичной. Мы также, имеем возможность регулировать данные параметры. Подробнее »

Данный пост является продолжением статьи о вкладках jQuery, в которой описан процесс их создания более подробно. Здесь же Вы узнаете как можно установить вкладки в широко известный блог WordPress. На самом деле в интеграции нет ничего сложного. Просто, нужно кое-что изменить в HTML разметке. Останавливаться на стилях CSS и jQuery я не буду. Увидеть, взять, а в дальнейшем, если захотите, применить их, Вы сможете, прочитав предыдущий пример. Вот как всё будет выглядеть после некоторых преобразований: Подробнее »

Одна из самых больших проблем веб дизайнеров, компактное размещение информации на странице сайта без потери удобства пользования. Применение вкладок jQuery, отличный способ справиться с этой проблемой и широко используется в блогах в последнее время. Сегодня мы создадим небольшие информационные HTML окна, которые будут появляться на страницах сайта при нажатии на определённую вкладку. Мы достигнем такого эффекта с помощью технологии jQuery.

Вы можете сами посмотреть, что у нас в итоге выйдет или скачать здесь. Обычно данная панель устанавливается в боковой части страницы, но применив фантазию можно выйти за эти рамки. Итак, перейдём к построению вкладок. Подробнее »