Js用户引导插件intro

最新推荐文章于 2024-03-28 16:30:00 发布

dingfu6404

最新推荐文章于 2024-03-28 16:30:00 发布

阅读量172

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/413xiaol/p/7912588.html

版权

1.demo直接贴上来了，有什么不懂的，直接去官网上看,地址：https://introjs.com/。

2.这个intro插件的版本是v2.7.0，复制下来代码，引入库应该直接可以运行。

3.点评一下：
　　a.插件不会自己记录引导的信息，需要手动控制引导是不是执行过
　　b.不在step里提供钩子，而是提供全局的钩子
　　c.在全局钩子里用this._introItems[this._currentStep]找到当前的
　　d.可以在step里定义自己的函数，然后在全局钩子里调用
　　e.不能动态生成节点
　　f.backdrop的时候，点下一步不会闪
　　g.提供hints的支持
　　h.element为id的时候没啥说的，为class的时候，第一个匹配上的class出现引导

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="introjs.css" type="text/css" rel="stylesheet" />
<script src="jquery-2.1.4.js"></script>
<script type="text/javascript"  src="intro.js"></script>
<script type="text/javascript">
    $(function(){
        intro = introJs();
        intro.setOptions({
            
            prevLabel:"<", 
            nextLabel:">",
            skipLabel:"skip",
            doneLabel:"done",
            
            steps: [
                {    
                    element: '#div1',
                    intro: '1~~',
                    position: 'right'
                },
                {
                    element: '#div2',
                    intro: '2~~',
                    position: 'right'
                },
                {
                    element: '.div3',
                    intro: '<a href="www.cnblogs.com">3</a>~~',
                    position: 'bottom'
                } 
            ],
            hints: [
                {
                    element: '#div1',
                    hint: "This is a tooltip.",
                    hintPosition: 'top-middle'
                },
                {
                    element: '#div2',
                    hint: 'More features, more fun.',
                    position: 'left'
                },
                {
                    element: '.div3',
                    hint: "<b>Another</b> step.",
                    hintPosition: 'top-middle'
                }
            ]

        });
        intro.onbeforechange(function(targetElement) {
           console.log(this)  // this._introItems[this._currentStep]
        });
        
        intro.start();
    });
</script>
</head>
<body>
    <div id="div1" style="width:150px;height:50px;">1</div>
    <div id="div2" style="width:150px;height:50px;">2</div>
    <div class="div3" style="width:150px;height:50px;">3</div>
    
    <button οnclick="intro.addHints()">addHint</button>
     
</body>
</html>

转载于:https://www.cnblogs.com/413xiaol/p/7912588.html

dingfu6404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js用户引导插件intro

1.demo直接贴上来了，有什么不懂的，直接去官网上看,地址：https://introjs.com/。2.这个intro插件的版本是v2.7.0，复制下来代码，引入库应该直接可以运行。3.点评一下：　　a.插件不会自己记录引导的信息，需要手动控制引导是不是执行过　　b.不在step里提供钩子，而是提供全局的钩子　　c.在全局钩子里用this._introItems[this._...
复制链接

扫一扫