Здравейте приятели! Намерих много полезна малка библиотека. Може да го намерите за удобен и може да облекчи работата ви. Така че нямам търпение да го споделя с вас. Нарича се 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 или друг елемент. Избрах един случайно.
