intro.js 頁面引導簡單用法


下載地址:http://pan.baidu.com/share/link?shareid=1894002026&uk=1829018343

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="introjs.css" type="text/css" rel="stylesheet" />
<script type="text/javascript"  src="jquery-1.8.3.min.js"></script>
 <script type="text/javascript"  src="intro.js"></script>
<script type="text/javascript">
    $(function(){
            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: 'right'
                    },
                    {
                        //第三步引導
                        element: '.div3',
                        intro: '<a href="www.cnblogs.com">這是第三個DIV</a>~~',
                        position: 'bottom'
                    } 
                ]

            }).start();
    });
</script>
</head>
<body>
    <div id="div1" style="width:150px;height:50px;">這里出現第一步引導</div>
     <div id="div2" style="width:150px;height:50px;">這里出現第二步引導</div>
     <div class="div3" style="width:150px;height:50px;">這里出現第三步引導</div>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM