Красива підказка при натисканні

На сайті вже є кілька уроків з приводу спливаючих підказок. Посилання на ці уроки ви можете знайти в повній новині. Але в цьому уроці ми розглянемо трохи інший вид спливаючих підказок. Їх значна відмінність полягає в тому, що вони мають багато функцій для налаштування. Можна міняти текст кнопок, змінювати положення підказок, затемнювати або не затемняється сторінку при появі підказки, і навіть багатьох інших настройки.

Схожі уроки про спливаючі підказки:

• Підказки CSS3
• Красиве повідомлення на CSS3
• Простими підказками на CSS3 і jQuery

Приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися?

HTML частина

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

123

lt;link rel="Stylesheet" type="Text / css" href="Css / guiders-1.3.0.css" /gt;lt;script type="Text / javascript" src="Js / jquery-1.7.1.min.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / guiders-1.3.0.js"gt; lt;/scriptgt;

Відео: Спливаюче вікно на сайті за допомогою HTML, CSS і JQuery

Підказку можна прив`язати до заслання, кнопці, текстового поля і т.д. У цьому уроці ми будемо використовувати посилання. Тобто після натисканні на посилання буде з`являтися підказка як на зображенні нижче:

1234567

lt;htmlgt;lt;bodygt;lt;div style="Text-align: center;"gt;lt;a id="Demo" href="#" gt; Натисни!lt;agt;lt;/divgt;lt;/bodygt;lt;/htmlgt;

jQuery частина

Після того як додали посилання, кнопки або будь-який інший елемент керування, необхідно за допомогою jQuery прив`язати підказку:

123456789101112

$(`#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».

Відео: Adobe Muse уроки | 30. Як зробити підказку

висновок

Непогані підказки, які якомога застосовувати щоб більше компактно розташувати інформацію. Або при реєстрації показати спливаюче повідомлення щоб повідомити про щось користувача, і т.д.

Успіхів!

джерело: https://onextrapixel.com/2014/02/04/creating-guided-product-tours-like-google-facebook/