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

2024-05-06 14:37:02

字体：大中小

来源：转载

供稿：网友

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: [

上一篇：js判断浏览器类型的方法

下一篇：[JSF]使用DataModel处理表行事件的实例代码