intro.js 頁面引導(dǎo)簡單用法分享

更新時間：2013年08月06日 10:18:54 作者：

這篇文章介紹了intro.js 頁面引導(dǎo)簡單用法，有需要的朋友可以參考一下

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

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

第二步：選擇你需要添加指引的區(qū)塊，對區(qū)塊添加唯一的id或者樣式

第三步：寫一個具體的js函數(shù)，完成引導(dǎo)功能

<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();
});
//每次頁面加載時調(diào)用即可
function intro(){
            //這個變量可以用來存取版本號，系統(tǒng)更新時候改變相應(yīng)值
            cur_val = 1;
            //判斷函數(shù)所接收變量的長度
            if (arguments.length ==0)
            {
                //每個頁面設(shè)置不同的cookie變量名稱，不可以重復(fù)，有新版本時，更新cur_val
                //這里模擬很多網(wǎng)站有新版本更新時才出現(xiàn)一次引導(dǎo)頁，第二次進(jìn)入進(jìn)不再出現(xiàn)，這里有cookie來判斷
                if ($.cookie("intro_cookie_index") == cur_val)
                 {
                    return;
                 }
            }

            introjs().setoptions({
                //對應(yīng)的按鈕
                prevlabel:"上一步",
                nextlabel:"下一步",
                skiplabel:"跳過",
                donelabel:"結(jié)束",
                //對應(yīng)的數(shù)組，順序出現(xiàn)每一步引導(dǎo)提示
                steps: [
                    {
                        //第一步引導(dǎo)
                        //這個屬性類似于jquery的選擇器，可以通過jquery選擇器的方式來選擇你需要選中的對象進(jìn)行指引
                        element: "#div1",
                        //這里是每個引導(dǎo)框具體的文字內(nèi)容，中間可以編寫html代碼
                        intro: "這是第一個div~~",
                        //這里可以規(guī)定引導(dǎo)框相對于選中對象出現(xiàn)的位置 top,bottom,left,right
                        position: "right"
                    },
                    {
                        //第二步引導(dǎo)
                        element: "#div2",
                        intro: "這是第二個div~~",
                        position: "left"
                    },
                    {
                        //第三步引導(dǎo)
                        element: ".div3",
                        intro: "<a href="www.cnblogs.com">這是第三個div</a>~~",
                        position: "bottom"
                    }
                ]

            }).oncomplete(function(){
                //點擊跳過按鈕后執(zhí)行的事件(這里保存對應(yīng)的版本號到cookie,并且設(shè)置有效期為30天）
                $.cookie("intro_cookie_index",cur_val,{expires:30});
            }).onexit(function(){
                //點擊結(jié)束按鈕后，執(zhí)行的事件
               $.cookie("intro_cookie_index",cur_val,{expires:30});
            }) .start();
        }
</script>
</head>
<body>
     <div id="div1">這里出現(xiàn)第一步引導(dǎo)</div>
     <div id="div2">這里出現(xiàn)第二步引導(dǎo)</div>
     <div class="div3">這里出現(xiàn)第三步引導(dǎo)</div>
</body>
</html>