Люблю джаваскрипт за то, что c ним порой чувствуешь себя магом и волшебником. Не так давно в голове возникла идея - а что, если на сайт, который изначально не гибок в этом плане (без аджакса и джаваскриптовой цветомузыки) навешать немного джаваскрипта. Скажу сразу, речь идет об LMS Moodle (для тех, кто не в курсе - это CMS для тренингов). Так вот была у нас одна проблемка с ним - много че может делать, только вот ничего не понятно как это сделать - часто пользователи нас спрашивают "а как то?", "а как это?", причем, порой, даже сам забываешь где там кликнуть надо... Люблю я его за это - квестообразующий :) - не соскучишься с ним. Но это мне так интересно, а другим пользователям? Нужно максимально упрощать!
Идея пришла во время серфинга на другом сайте. Там был простенький гид, кликни там, кликни сям, а тут вот это, а тут ты можешь сделать это. И я подумал - хочу! Стал искать решения. Их есть с десяток. Но я хотел решения, которое будет чисто джаваскриптовым - без правки HTML. И оно нашлось! Сразу показываю результат, каким он получился у меня.
Есть такая библиотека с использованием JQuery, называется Guiders-JS. Настраивается достаточно не сложно. Вот код, который я вставил в боковую панельку чтобы линк Training Guide ожил.
Enjoy! И спасибо разработчикам Guiders-JS!!
Идея пришла во время серфинга на другом сайте. Там был простенький гид, кликни там, кликни сям, а тут вот это, а тут ты можешь сделать это. И я подумал - хочу! Стал искать решения. Их есть с десяток. Но я хотел решения, которое будет чисто джаваскриптовым - без правки HTML. И оно нашлось! Сразу показываю результат, каким он получился у меня.
Есть такая библиотека с использованием JQuery, называется Guiders-JS. Настраивается достаточно не сложно. Вот код, который я вставил в боковую панельку чтобы линк Training Guide ожил.
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li><span id="training-guide"><a href="#">Training guide</a></span></li>
</ul>
<p id="training-guide-script">
<script src="https://host.com/js/guiders-1.3.0/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="https://host.com/js/guiders-1.3.0/guiders-1.3.0.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://host.com/js/guiders-1.3.0/guiders-1.3.0.css" type="text/css" />
<script src="https://host.com/js/guiders-1.3.0/training-guiders.js" type="text/javascript"></script>
</p>
Все просто. Создается линк никуда не ссылающийся (на него потом навешается обработчик с помощью jQuery). Подключается библиотека jQuery и Guiders-JS, подключается стиль и мой скрипт, в котором описаны окошки гида. Там же и навешивается обработчик на клик и делаются еще кой че.
$(document).ready(function () {
if ($("#module-1224").size() == 0) { // проверяем, если мы не на главной страничике (содержащей див
// с айди module-1224), то запускать гид бессмысленно
$('#training-guide').parent().hide(); // потому мы скрываем возможность вызвать гида
return;
}
$('#training-guide').click(function () { // при клике на линк
guiders.show("start"); // открываем гид (первый диалог)
});
guiders.createGuider({ // создается первый диалог
buttons: [ // с кнопкой next
{name: "Next"}
],
title: "**** ******* Guide", // это его заголовок
description: "Hi! This is **** ****** training course guide. Hope it will help.", // с сообщением
id: "start", // это его айдиха
next: "guide2", // это айдиха того, куда переходим
overlay: true, // задний фон за диалогом будет затеняться
xButton: true, // у диалога будет кнопка X в правом верхнем углу
closeOnEscape: false, // по нажатию на Esc будет закрыто окно
width: 350 // ширина диалога
}).show();
guiders.createGuider({ // создаем следующий шаг
attachTo: "#inst16", // он прикрепляется к диву с этой айдишкой
position: 10, // прицепляется в позиции 10. С каждой стороны к диву можно прицепиться:
// с одного краю, с другого и по центру - всего 12 позиций. По часовой
// стрелке от 1 до 12.
//
// вот кусочек исходного кода библиотеки:
// guiders._offsetNameMapping = {
// "topLeft": 11,
// "top": 12,
// "topRight": 1,
// "rightTop": 2,
// "right": 3,
// "rightBottom": 4,
// "bottomRight": 5,
// "bottom": 6,
// "bottomLeft": 7,
// "leftBottom": 8,
// "left": 9,
// "leftTop": 10
// "};
overlay: true, // опять же фон будет размыт и в тени
highlight: "#inst16", // но сам див будет подсвечен
buttons: [ {name: 'Next', onclick: guiders.next} ], //" на кнопку next навешивается обработчик - следующий диалог
title: "",
description: "You you can find useful links here.", // другое сообщение
id: "guide2", // айдиха текущего диалога
next: "guide3", // куда идем на следующий диалог
autoFocus: true, // если вдруг див ушел за пределы экрана, подсветить его проскролив страничку
xButton: true,
closeOnEscape: false,
width: 350
});
function topic_toggle_new(number, isOpen) { // это самописная функция которая разворачивает/сворачивает
// модуля тренинга на Moodle, вызывая его js код
var open = $("#toggle-" + number + " .toggle_closed");
open = (open.size() > 0) ? open[0] : null;
var close = $("#toggle-" + number + " .toggle_open");
close = (close.size() > 0) ? close[0] : null;
if (isOpen) {
element = (open == null) ? null : open;
} else {
element = (close == null) ? null : close;
}
if (element != null) {
toggle_topic(element, number);
}
}
guiders.createGuider({ // создаем третий шаг
attachTo: "#inst370",
position: 10,
highlight: "#inst370",
overlay: true,
buttons: [
{name: "Next", onclick: function () { // вот тут на next навешиваем больше чем одну
// функцию - создли анонимную функцию и в ней
// прописали весь сценарий
topic_toggle_new(1, false);
topic_toggle_new(2, false);
topic_toggle_new(3, false);
topic_toggle_new(4, false);
topic_toggle_new(5, false);
topic_toggle_new(6, false);
topic_toggle_new(7, false);
topic_toggle_new(8, false);
topic_toggle_new(9, false);
topic_toggle_new(10, false);
guiders.next();
}}
],
title: "",
description: "For each code review you'll get 3 XP. More code " +
"review you do - more XP you get. Collect XP and " +
"distinguish yourself!",
id: "guide3",
next: "guide4",
autoFocus: true,
xButton: true,
closeOnEscape: false,
width: 350
});
// ну и так далее. На последнем шаге добавляется кнопка Close вот так
// buttons: [{name: "Close", onclick: guiders.hideAll }]
// ...
});
Что замечательно, так это то, что я могу по линку https://host.com/training-page.html#guider=start открыть страничку с гидом.
Enjoy! И спасибо разработчикам Guiders-JS!!
Сообщения
