zoukankan      html  css  js  c++  java
  • 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="150px;height:50px;">这里出现第一步引导</div>
         <div id="div2" style="150px;height:50px;">这里出现第二步引导</div>
         <div class="div3" style="150px;height:50px;">这里出现第三步引导</div>
    </body>
    </html>
  • 相关阅读:
    zabbix入门知识
    flask_login
    flask_数据库
    flask_web表单
    flask_模板
    flask_hello world
    1024 Hello World
    使用bat批处理文件备份postgresql数据库
    使用bat批处理文件备份mysql数据库
    在windows7下创建ftp服务站点
  • 原文地址:https://www.cnblogs.com/kgdxpr/p/3231920.html
Copyright © 2011-2022 走看看