В этой статье показано, как создать простой пользовательский интерфейс обхода мастера с минимальным количеством JavaScript.
Автор Sreemaan KCK S, «Smart Coder»
Большинство людей представляют себе пожилого мужчину с магическими способностями, вроде Дамблдора из «Гарри Поттера», когда слышат слово «волшебник». К сожалению, это имеет мало общего с техническим термином, но может творить чудеса при создании пользовательских интерфейсов.
Как проходит тур по Wizard?
Мастер — это помощник по настройке, который проводит пользователя через набор требований или процедур, которые необходимо выполнить для завершения задачи. Порядок, в котором работают панели мастера, определяется потоком обхода мастера. Панели мастера могут либо следовать одному потоку процессов от начала до конца, либо они могут расходиться на множество отдельных потоков процессов.
Проще говоря, «Волшебный поток тура» — это, по сути, тур по всей странице или веб-сайту. Для лучшего понимания ознакомьтесь с образцом ниже.
Веб-сайт проводит пользователя через «Поток тура мастера» со всеми функциями и другим контентом, присутствующим на веб-сайте, когда они заходят на новый веб-сайт или любую новую платформу, которую они никогда раньше не посещали, как показано в примере выше. Из этого руководства пользователь получает общее представление о веб-сайте и о том, как его использовать. Потоки Wizard Tour часто используются в мобильных приложениях, особенно в играх.
РЕАЛИЗАЦИЯ:
Для реализации цикла обхода мастера требуется больше строк кода JS, однако на простом примере мы продемонстрируем, как шаг за шагом создать поток обхода мастера с минимальным кодом JS.
ПОДГОТОВКА:
Для этой реализации потока тура мастера я использовал структуру HTML-кода вместе с CSS для стилей и JS для взаимодействия.
БАЗОВАЯ СТРУКТУРА КОДА:
<html>
<head>
<meta charset="UTF-8">
<title>Wizard Tour Flow</title>
</head>
<style>
{...css stylings }
</style>
<body>
<div class = “wholePage”>
<h1 class="title">
<span>Title</span>
<div>
{...tooltip content}
</div>
</h1>
</div>
<script>
{...Js functionality }
</script>
</body>
</html>
1. РЕАЛИЗАЦИЯ КОДА HTML И CSS
Шаг 1:
Создайте Целый Контейнер для страницы, который содержит все необходимые элементы.
HTML-код:-
<div class="container">
{...elements}
</div>
Мы должны вызвать свойство CSS, используя имя класса. Имя класса и имя свойства должны быть идентичными.
Код CSS:
.container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f6f4ff;
text-align: center;
color: rgb(79, 50, 103);
}
- Чтобы контейнер занимал всю страницу, мы должны использовать свойства и значения CSS, перечисленные выше (позиция, левое, верхнее, ширина и высота).
- Для выравнивания элементов внутри контейнера используется text-align.
Шаг 2:
Внутри контейнера мы должны создавать элементы один за другим.
HTML-код:-
<h1 class="title">
<span>Wizard Tour Flow</span>
</h1>
<h2 class="subtitle">
<span>Step-by-Step guide and feature introduction</span>
</h2>
<div class="content">
<h3>A wizard is a series of pages that guide a user
through a complex task. Allow the user to move through the pages.</h3>
<h3> Wizard panels can move in a straight line from
start to finish, or branch into several different process flows.</h3>
<h3>Typically In Wizard tour flow, each page collects a piece
of information; when the user clicks the Finish button.</h3>
</div>
Код CSS:
.title{
padding: 30px;
width: 300px;
margin: 0 auto 20px;
position: relative;
}
.subtitle{
padding: 30px;
width: 500px;
margin: 0 auto 30px auto;
position: relative;
}
.content{
display: flex !important;
padding: 30px 0;
width: 80%;
margin: 0 auto;
position: relative;
}
p{
margin: 0 0 30px 0;
font-size: 1rem;
}
h3{
margin: 0 50px;
}
- Свойство position позиционируется относительно своего нормального положения. Свойство Margin (margin: верхний правый нижний левый) 0px и 30px задается для верхнего и нижнего, а auto задается для правого и левого, чтобы сделать элемент центральным.
- Свойство display flex предназначено для модуля макета гибкого блока. Важное правило переопределяет все предыдущие правила стиля для этого конкретного свойства этого элемента!
Шаг 3.
Во-первых, мы должны указать общее имя класса для элементов и создать блок div, содержащий кнопки (далее, пропустить) внутри каждого элемента, который мы собираемся выделить на веб-странице. Используя событие onClick(), мы должны вызвать функцию Javascript для прохождения.
Имя класса = "tourflow"
HTML-код:-
<h1 class="title tourflow">
<span>Wizard Tour Flow</span>
<div class="tooltip">
<p>Title of the Project</p>
<button class="next" onClick="nextStep()">next</button>
<button class="skip" onClick="dismiss()">skip</button>
</div>
</h1>
<h2 class="subtitle tourflow">
<span>Step-by-Step guide and feature introduction</span>
<div class="tooltip">
<p>Sub Heading of the project</p>
<button class="next" onClick="nextStep()">next</button>
<button class="skip" onClick="dismiss()">skip</button>
</div>
</h2>
<div class="content tourflow">
<h3>{...content}</h3>
<h3>{...content}</h3>
<h3>{...content}</h3>
<div class="tooltip">
<p>Content of the project</p>
<button class="skip" onClick="dismiss()">skip</button>
</div>
</div>
Код CSS:
.tooltip{
font-size: 10px;
border: 1px solid;
border-radius: 15px;
color: #33363e;
font-weight: bold;
position: absolute;
bottom: -110px;
left: 50%;
display: none;
transform: translateX(-50%);
background: white;
padding: 1rem;
z-index: 2;
}
.tooltip::after{
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
margin-left: -8px;
width: 0px;
height: 0px;
border-bottom: 8px solid white;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
- Родительский класс должен быть относительным, а дочернее свойство должно быть абсолютным, чтобы всплывающая подсказка размещалась там, где она нам нужна. Чтобы расположить всплывающую подсказку, укажите значения преобразования и положения.
- Стрелка в верхней части всплывающей подсказки — это селектор ::after, который вставляется после содержимого каждого выбранного элемента (элементов).
Шаг 4:
Для размытия фона добавьте элемент div внутри класса Container.
HTML-код:-
<div class="overlay">{for blurring the background}</div>
Код CSS:
.overlay{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
display: block;
}
Примечание. Свойство z-index определяет порядок элементов в стеке. Элемент стека с более высоким порядком всегда находится перед элементом стека с более низким порядком.
2. РЕАЛИЗАЦИЯ КОДА JAVASCRIPT
Пока страница загружается, начинается «турпоток». Теперь нам предстоит пройти их один за другим.
Шаг 1:
JS-код:-
const collection = document.getElementsByClassName("tourflow");
Используя элементы HTML DOM, получая элементы с именем класса «tourflow» и присваивая объекты константе с областью действия блока.
Шаг 2:
HTML-код:-
<button class="next" onClick="nextStep()">next</button>
При нажатии на следующую кнопку событие onClick вызывает функцию nextStep().
JS-код:
let index = 0;
nextStep();
function nextStep(){
Object.keys(collection).forEach( (item,i) => {
i === index?(collection[i].classList.add("active")):inactive(i);
})
index++;
}
Код CSS:
.active{
border: 1px solid;
background: #f6f4ff;
z-index: 2;
border-radius: 15px;
}
.tourflow.active .tooltip{
display: block;
}
Добавляя два вышеуказанных класса, он переопределяет существующий Css. Кроме того, он выделяет всплывающую подсказку и содержимое tourflow.
- Инициализация значения индекса равным 0.
- Заголовок должен быть выделен во время загрузки страницы. Таким образом, сначала вызывается функция nextStep().
- Элементы DOM собирают элементы как объекты, поэтому мы использовали Object.keys() и forEach() для повторения цикла.
- Используя тернарный оператор, проверьте условие, что если index = i, то добавьте активный класс к элементу коллекции, иначе вызовите функцию inactive(j), чтобы удалить активное состояние из посещенных элементов.
function inactive(j){
collection[j].classList.remove("active");
}
5. Этот HTML DOM удаляет активный класс из элемента.
Шаг 3.
HTML-код:
<button class="skip" onClick="dismiss()">skip</button>
При нажатии на кнопку пропуска событие onClick вызывает функцию отклонения().
JS-код:
function dismiss(){
bg[0].classList.add("overlay_inactive");
Object.keys(collection).forEach((item,i) => inactive(i));
}
Код CSS:
.overlay_inactive{
display: none;
}
- Добавление класса overlay_inactive, свойство display: none переопределяет класс наложения.
- Использование forEach() для итерации цикла и вызова inactive() и удаления активного класса из всех элементов. Так что сайт нормальный.
Вывод: проверьте вывод по ссылке ниже
Платформа кода JSFiddle: https://jsfiddle.net/Sreemaan_KCKS/6agy08v2/2/
Заключение:
Мастера могут помочь пользователям с ограниченными знаниями предметной области, оптимизируя процедуры и направляя пользователей. Продолжая творить, я надеюсь, вы лучше поймете, как волшебник может значительно повысить удовлетворенность и удобство ваших проектов, если он создается просто и с определенной целью.
Встретить команду!
Автор
Рассмотрено
Редактор
Мы в CaratLane решаем некоторые из самых интригующих задач, чтобы оставить свой след в относительно неизведанной многоканальной ювелирной отрасли. Если вы заинтересованы в преодолении таких препятствий, не стесняйтесь отправить свое обновленное резюме/CV по адресу: [email protected]
