Exore LTD » jQuery » Красивая всплывающая подсказка при нажатии
Лого SiteHere.ru

Апрель 27, 2015 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Красивая всплывающая подсказка при нажатии

Красивая всплавающая подсказка при нажатии

На сайте уже есть несколько уроков по поводу всплывающих подсказок. Ссылки на эти уроки вы можете найти в полной новости. Но в этом уроке мы рассмотрим немного другой вид всплывающих подсказок. Их значительное отличие состоит в том, что они имеют множество функций для настройки. Можно менять текст кнопок, изменять положение подсказок, затемнять или не затемнять страницу при появлении подсказки, а также многие другие настройки.

Похожие уроки про всплывающие подсказки:

Пример можно увидеть здесь:

Посмотреть примерСкачать



Как пользоваться?

HTML часть

Необходимо скачать и подключить библиотеку jQuery(она находится в папке с демо) и guiders-1.3.0.js(сам плагин и стили можно скачать здесь):

1
2
3

<link rel="stylesheet" type="text/css" href="css/guiders-1.3.0.css" />		
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/guiders-1.3.0.js"></script>

Всплывающую подсказку можно привязать к ссылке, кнопке, текстовому полю и т.д. В этом уроке мы будем использовать ссылки. То есть после нажатии на ссылку будет появляться всплывающая подсказка как на изображении ниже:

Пример подсказки
1
2
3
4
5
6
7

<html>
<body>
    <div style="text-align:center;">
        <a id="demo" href="#" >Нажми!<a>
    </div>
</body>
</html>


jQuery часть

После того как добавили ссылку, кнопку или любой другой элемент управления, необходимо с помощью jQuery привязать подсказку:

1
2
3
4
5
6
7
8
9
10
11
12

$('#demo').click(function(){
    guiders.createGuider({
    attachTo: "#demo",
    buttons: [{name: "Закрыть",onclick:guiders.hideAll}],
    title: "Нажми здесь чтобы переместиться к следующему элементу",
    description: "Подсказки могут быть использованы для перемещения по элементам страницы",      
    id: "tip",
    overlay: true,
    position:6,
    autoFocus:true
    }).show();
});

Рассмотрим более детально каждое свойство:

  • attachTo: — (необязательно) данное свойство определяет класс или идентификатор элемента, к которому будет «привязана» подсказка.
  • buttons: — массив объектов кнопок.
  • title: — данное свойство отвечает за заголовок всплывающей подсказки.
  • description: — подробное описание подсказки.
  • overlay: — (необязательно) если значение равно «true», тогда остальная часть страницы затемняется при появлении подсказки.
  • position: — (необязательно/обязательно если используется свойство attachTo) задает положение, где появится подсказка. Как в часах, здесь задается положение появления подсказки(всего 12 положений).
  • autoFocus: — (необязательно) если желаете чтобы прокрутить окно браузера к тому месту где появилась всплывающая подсказка, тогда нужно установить данное свойство в значение «true».


Вывод

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


Успехов!

Источник: http://www.onextrapixel.com/2014/02/04/creating-guided-product-tours-like-google-facebook/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

8 комментариев к записи

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