Отображение гайдеров

Приветственное окно

Для начала попробуем вызвать отдельный гайдер. Скажем, мы хотим показать приветственное сообщение при открытие страницы. Код будет выглядеть вот так:

<script type="text/javascript">
	guider.createGuider({
		id:          "first",
		title:       "Интерфейсные гайдеры с помощью jQuery",
		description: "Гайдеры позволяют объяснять и указывать на отдельные элементы веб-интерфейса. Это окошко, например, показывает приветственное сообщение.",
		overlay:     true,
		width:       500
	}).show();
</script>

Гайдер, привязанный к элементу

Если же вы хотите привязать гайдер к какому-то элементу на страницы, вам необходимо указать его в параметре attachTo в таком виде:

<script type="text/javascript">
	guider.createGuider({
		id:          "second",
		attachTo:    "#clock",
		title:       "Гайдеры обычно указывают на какие-то элементы на странице",
		description: "Этот указывает на часы, находясь при этом в позиции 12 часов относительно них.",
		position:    12
	});
</script>

Цепочка гайдеров

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

<script type="text/javascript">
	guider.createGuider({
		id:          "first",
		title:       "Интерфейсные гайдеры с помощью jQuery",
		next:        "second",
		description: "Гайдеры позволяют объяснять и указывать на отдельные элементы веб-интерфейса. Это окошко, например, показывает приветственное сообщение.",
		buttons:     [{ name: "Далее", onclick: guider.next }],
		overlay:     true,
		width:       500
	}).show();

	guider.createGuider({
		id:          "second",
		attachTo:    "#clock",
		title:       "Гайдеры обычно указывают на какие-то элементы на странице",
		description: "Этот указывает на часы, находясь при этом в позиции 12 часов относительно них.",
		buttons:     [{ name: "Закрыть", onclick: guider.hideAll }],
		position:    12
	});
</script>

Кнопки

Вы можете создать свои кнопки и добавить к ним нужные вам действия. Параметр buttons принимает в качестве аргумента массив объектов, каждый из которых содержит обязательные параметр name и необязательный onclick. Вот так, например, можно добавить «Далее» и «Закрыть» к гайдеру:

<script type="text/javascript">
	guider.createGuider({
		id:          "second",
		attachTo:    "#clock",
		title:       "Гайдеры обычно указывают на какие-то элементы на странице",
		next:        "third",
		description: "Этот указывает на часы, находясь при этом в позиции 12 часов относительно них.",
		buttons:     [{ name: "Закрыть", onclick: guider.hideAll },
		              { name: "Далее", onclick: guider.next }],
		position:    12
	});
</script>

А вот и пример, в котором можно увидеть все рассмотренные возможности в действии.

Пример гайдеров

Вызов гайдера из адресной строки

Допустим, вы хотите, чтобы при открытие страницы по обычному адресу (например, /mypage/) гайдеры не отображались, но отображался бы гайдер №2 при добавлении в адрес его вызова. Это можно сделать, добавив в адрес ID нужного гайдера в таком виде: http://vremenno.net/examples/jquery-interface-guiders/#guider=second

Параметры

Теперь рассмотрим список всех параметров, которые можно задавать для отдельного гайдера. 

id

Уникальный идентификатор гайдера, по которому происходит обращение к нему (например, из той же адресной строки).

attachTo

Сообщает, к какому элементу на странице привязать гайдер. Чтобы привязать к элементу с ID logo, надо написать attachTo: '#logo'.

position

Положение гайдера относительно элемента. Указывается как стрелки в часах: 12 (сверху), 6 (снизу), 3 (справа) или 9 (слева).

title

Заголовок гайдера.

description

Текст гайдера.

next

Идентификатор следующего гайдера.

buttons

Кнопки. Как их указывать разобрали выше.

buttonCustomHTML

Произвольный код, который будет добавлен после кнопок.

width

Ширина гайдера.

overlay

Принимает true, если надо перекрыть контент страницы, или false, если не надо.

Методы

Для взаимодействия с гайдерами есть несколько методов. Их можно использовать как внутри объекта, так и извне.

guider.next()

Открывает следующий после текущего гайдер.

guider.hideAll()

Скрывает все гайдеры.

Итак, как обычно пример с комментариями кода и архив со всеми скриптами.

Пример Архив

Что думаете по поводу такого решения? Удобно ли это пользователям?