Привет, друзья! Я нашел очень полезную небольшую библиотеку. Возможно, это окажется для вас удобным и облегчит вашу рабочую нагрузку. Итак, мне не терпится поделиться этим с вами. Он называется driver.js для функции загрузки страницы.
Функция загрузки страницы — распространенная функция в веб-разработке. Вы можете впервые ознакомить пользователя с функционалом вашей страницы, воспользовавшись функцией загрузки страницы.
Сегодня я хотел бы представить его.
Официальный пример
Это пример, представленный на официальном сайте driver.js.
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver({
showProgress: true,
steps: [
{ element: '.page-header', popover: { title: 'Title', description: 'Description' } },
{ element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
{ element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
{ element: '.footer', popover: { title: 'Title', description: 'Description' } },
]
});
driverObj.drive()
Вы можете видеть, что с помощью всего лишь дюжины строк кода вы можете выполнить функцию загрузки страницы.
- Сначала мы импортируем driver.js и driver.css.
- Затем вызовите функцию драйвера, чтобы создать объект
driverObj, и напишите шаги загрузки, используя параметрsteps, элемент для элемента DOM, который необходимо выделить, или соответствующий селектор CSS для DOM. - Наконец, вызовите метод диска
driverObjдля загрузки страницы.
Давай посмотрим что происходит:
Завершена полнофункциональная функция загрузки страницы.
Хорошо, давайте попробуем сами, начнём с простого примера. Наша текущая цель — выделить изображение на странице, хотя это также может быть H1, DIV или любой другой элемент. Я выбрал один наугад.
