使用driver.js实现新(xin)手(shou)导航，并使展示区域无法点击

shino_1125

已于 2022-02-01 14:58:05 修改

阅读量1.3k

点赞数 4

文章标签： javascript

于 2021-02-14 21:08:25 首次发布

本文链接：https://blog.csdn.net/weixin_38312808/article/details/113811019

版权

业务需求：需要新手引导，使用driver.js实现后，提出若干修改，其中最难搞的是高亮部分不可点击，下面给出代码实现。

一、官网demo，以及个人的codepen实现效果

driver.js官网demo
codepen

二、直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>driverjs</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/driver.js/0.9.8/driver.min.js"
        integrity="sha512-TMCPpR1wPPr92/7kiF88j9uTWczLpHyUTzt8sScGyN2btq/xWN22GjsdgNfUIMDtXV5WXUZ4s2OThcgpVxQv4w=="
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/driver.js/0.9.8/driver.min.css"
        integrity="sha512-yQuTmOu0Rm68Udrrd2uqDvHc/xzvQxJoNzYgLn7SK+EpPuEKZu82S44D2G++HLiz6lhUShgJPOri7zvRTVtyZQ=="
        crossorigin="anonymous" />
    <style>
        .container {
            display: flex;
            justify-content: space-around;
        }

        .box {
            width: 20%;
            text-align: center;
            background-color: gray;
            height: 40px;
            color: #fff;
            position: relative;
        }

        .first_box .driver-prev-btn {
            display: none !important;
        }

        .last_box .driver-prew-btn {
            display: none !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box" id="box1">内容块1</div>
        <div class="box" id="box2">内容块2</div>
        <div class="box" id="box3">内容块3</div>
        <div class="box" id="box4">内容块4</div>
    </div>

    <script>
        const driver = new Driver({
            closeBtnText: '跳过',
            doneBtnText: '开始使用',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            allowClose: false
        })
        // Define the steps for introduction
        driver.defineSteps([
            {
                element: '#box1',
                popover: {
                    className: 'first_box',
                    title: '标题1',
                    description: '描述1',
                    position: 'bottom'
                }
            },
            {
                element: '#box2',
                popover: {
                    title: '标题2',
                    description: '描述2',
                    position: 'right'
                }
            },
            {
                element: '#box3',
                popover: {
                    title: '标题3',
                    description: '描述3',
                    position: 'bottom'
                }
            },
            {
                element: '#box4',
                popover: {
                    className: 'last_box',
                    title: '标题4',
                    description: '描述4',
                    position: 'left'
                }
            }
        ])

        const interval = null
        function start() {
            driver.start()
            driver.steps.forEach(el => el.node.style.pointerEvents = 'none')

            this.interval = setInterval(() => {
                if (!driver.isActivated) {
                    driver.steps.forEach(el => el.node.style.pointerEvents = 'auto')
                    clearInterval(interval)
                }
            }, 100)
        }

        start()
    </script>
</body>

</html>

shino_1125

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用driver.js实现新(xin)手(shou)导航，并使展示区域无法点击

业务需求：需要新手引导，使用driver.js实现后，提出若干修改，其中最难搞的是高亮部分不可点击，下面给出代码实现。一、官网demo，以及个人的codepen实现效果driver.js官网democodepen示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫