Лого www.SiteHere.ru

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

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

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

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

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

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

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

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.00/5 (40.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

Бесплатный PDF отчет
Комментарии (8) к записи
  • Артём

    Надо будет поэксперементировать 😎

     
  • Константин

    Спасибо, пригодится!

     
  • Денис

    Как сделать что бы после нажатия на кнопку "Далее" переходила по ссылке?

     
  • Дмитрий

    Спасибо, всё работает.

    Подскажите как сделать чтобы подсказка открывалась автоматически при загрузке страницы?

     
    • Юрий

      Дмитрий, посмотрите 5-й пример в данном демо.

       
      • Дмитрий

        Спасибо за ответ.

        Я не правильно объяснил.

        Как сделать чтобы первая подсказка открывалась только первый раз, а при последующих загрузках этой страницы нет?

         
        • Юрий

          Для этого придется написать небольшой JS код, потому что необходимо использовать cookie чтобы "запомнить" просматривал ли пользователь данную страницу или нет.

           
          • Дмитрий

            Да это я знаю. Просто думал может здесь это предусмотрено.

            Всё равно спасибо.

             

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

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