页面引导简单用法

intro.js demo

intro.js demo

intro.js demo

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

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

第一步:在页面中引入 intro.jsintrojs.css

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

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

第二步:选择你需要添加指引的区块,对区块添加唯一的ID或者样式

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

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

第三步:写一个具体的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>

demo
第一步:在页面中引入 intro.js 和 introjs.css
第二步:选择你需要添加指引的区块,对区块添加唯一的…

demo
第一步:在页面中引入 intro.js 和 introjs.css
第二步:选择你需要添加指引的区块,对区块添加唯一的…

发表评论

电子邮件地址不会被公开。 必填项已用*标注