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>

 

上一篇:Crontab里调用python脚本不成功的解决方案


下一篇:分析师预测甲骨文数据库12.2的市场策略将打击用户