intro.js 页面引导简单用法分享

更新时间：2013年08月06日 10:18:54 作者：

这篇文章介绍了intro.js 页面引导简单用法，有需要的朋友可以参考一下

intro.js demo http://usablica.github.io/intro.js/

第一步：在页面中引入 intro.js 和 introjs.css

第二步：选择你需要添加指引的区块，对区块添加唯一的id或者样式

第三步：写一个具体的js函数，完成引导功能

<html>
<head>
<script src="@url.content("~/content/intro.js")" type="text/javascript"></script>
    <link href="@url.content("~/content/introjs.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
    intro();
});
//每次页面加载时调用即可
function intro(){
            //这个变量可以用来存取版本号，系统更新时候改变相应值
            cur_val = 1;
            //判断函数所接收变量的长度
            if (arguments.length ==0)
            {
                //每个页面设置不同的cookie变量名称，不可以重复，有新版本时，更新cur_val
                //这里模拟很多网站有新版本更新时才出现一次引导页，第二次进入进不再出现，这里有cookie来判断
                if ($.cookie("intro_cookie_index") == cur_val)
                 {
                    return;
                 }
            }

            introjs().setoptions({
                //对应的按钮
                prevlabel:"上一步",
                nextlabel:"下一步",
                skiplabel:"跳过",
                donelabel:"结束",
                //对应的数组，顺序出现每一步引导提示
                steps: [
                    {
                        //第一步引导
                        //这个属性类似于jquery的选择器，可以通过jquery选择器的方式来选择你需要选中的对象进行指引
                        element: "#div1",
                        //这里是每个引导框具体的文字内容，中间可以编写html代码
                        intro: "这是第一个div~~",
                        //这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right
                        position: "right"
                    },
                    {
                        //第二步引导
                        element: "#div2",
                        intro: "这是第二个div~~",
                        position: "left"
                    },
                    {
                        //第三步引导
                        element: ".div3",
                        intro: "<a href="www.cnblogs.com">这是第三个div</a>~~",
                        position: "bottom"
                    }
                ]

            }).oncomplete(function(){
                //点击跳过按钮后执行的事件(这里保存对应的版本号到cookie,并且设置有效期为30天）
                $.cookie("intro_cookie_index",cur_val,{expires:30});
            }).onexit(function(){
                //点击结束按钮后，执行的事件
               $.cookie("intro_cookie_index",cur_val,{expires:30});
            }) .start();
        }
</script>
</head>
<body>
     <div id="div1">这里出现第一步引导</div>
     <div id="div2">这里出现第二步引导</div>
     <div class="div3">这里出现第三步引导</div>
</body>
</html>

您可能感兴趣的文章:

使用Bootstrap美化按钮实例代码(demo)
这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
javascript下利用arguments实现string.format函数
sitepoint上看到Andrew Tetlaw在08年写的文章arguments: A JavaScript Oddity，阅读之后，除了对arguments温故知新一遍以外，印象最深刻的还是Andrew的第一个函数实现的string.format功能。
2010-08-08
d3.js实现简单的网络拓扑图实例代码
最近一直在学习d3.js，大家都知道d3.js是一个非常不错的数据可视化库，我们可以用它来做一些比较酷的东西，比如可以来显示一些简单的网络拓扑图，这篇文中就通过实例代码给大家介绍了如何利用d3.js实现简单的网络拓扑图，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-11-11
JS模式之简单的订阅者和发布者模式完整实例
这篇文章主要介绍了JS模式之简单的订阅者和发布者模式,以一个完整实例形式详细分析了JS订阅者和发布者模式基本实现技巧,需要的朋友可以参考下
2015-06-06
js表数据排序 sort table data
对于表格的排序，是很不错的一个功能，方便用户快速的分析一些数据。
2009-02-02
JavaScript 手动实现instanceof的方法
instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，本文重点给大家介绍JavaScript手动实现instanceof的问题，感兴趣的朋友跟随小编一起看看吧
2021-10-10
js获取光标位置和设置文本框光标位置示例代码
本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置，以下代码兼容IE和Chrome，Firefox，大家参考使用吧
2014-01-01
详解uniapp页面跳转URL传参大坑
本文主要介绍了详解uniapp页面跳转URL传参大坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
小程序自定义导航栏兼容适配所有机型（附完整案例）
这篇文章主要介绍了小程序自定义导航栏兼容适配所有机型（附完整案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
微信小程序与公众号实现数据互通的方法
这篇文章主要介绍了微信小程序与公众号实现数据互通的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07