intro.js 頁面引導簡單用法分享

2019-11-20 22:27:03

字體：大中小

來源：轉載

供稿：網友

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>