初探intro.js

本人大二小学生一枚，大二的这个暑假时间有幸跟到一位老师做一些项目有关的事情。以上背景。

intro.js可以更好地介绍网站和功能，并为您的项目提供分步指南。

(点击上方文字可以链接到github)

英文好的童鞋点这里到intro的api

基本功能嘛，相信大家能够搜索这个名字一定是慕名而来，在这里就不多讲了，在Github仓库中example文件夹中可以打开index的html文件，可以看到各种引导形式的web表现。

这篇文章主要讲以下intro.js的以下几点滴啊：

1、如何插入图片

        只需将data－intro中加入img标签即可，就按照最标准的html标记语言来写就OK。例如：data-intro＝“balabala......nuo,this is a photo.”

2、如何跳页引导        

        跳页引导是一种很常见的web引导方式，在进行页面转换的时候就要传递相应的web页面参数告诉浏览器‘我要跳转了 老兄 你继续吧’

        那么在跳转的页面中你就需要做一些工作来进行喊话：

        喊话方式A：直接型（直接定义url的传递变量）

                                href="second.html?multipage=true"

        喊话方式B：羞涩型（增加一个js标签，把这个函数加进去，发送参数，顺便把最后一步的结束标签替换成下一页）

            introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {

          window.location.href = 'second.html?multipage=true';

        });

3、如何从制定的步数开始引导

        这个是用两种官方方式的one is goToStep()；another is goToStepNumber()

        用起来比较顺手的是introJs().goToStepNumber(1).start()；这种方式的话在括号中直接定义出需要跳转步骤的序号（data-step）即可，

4、利用js进行对按钮的监听，若有此按钮则进行引导，若无则pass

 if (RegExp('multipage', 'gi').test(window.location.search)) {

        introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {

          function IsLoad(_url,fun){

              $.ajax({

                  url:_url,

                  type:"get",

                  success:function(){

                    //说明请求的url存在，并且可以访问

                    if($.isFunction(fun)){

                            fun(true);

                          }

                 },

                  statusCode:{

                    404:function(){

                      //说明请求的url不存在

                      if($.isFunction(fun)){

                        fun(false);

                      }

                    }

                  }

                });

            }

            //调用

            var enter=[],

            _enter=document.getElementsByTagName('a');

            var enter_href;

            var buffer_href;

            for (var i=0; i<_enter.length; i++){

                var re = '/home';

                buffer_href=_enter[i].href;

                if (buffer_href.match(re)!=null){

                    enter_href=buffer_href;

                    break;

                }

            }

            if(enter_href!=undefined){

              enter_href=enter_href+'?multipage=true';

              window.location.href = enter_href;

            }

            else

            {

              alert("引导需要资源不存在，请您按照上一步引导操作之后，在进行点击。");

            }

        });

        introJs().start();

      }

5、引导中对于引导文字的设计

        呃呃，程序员加理工男在这说这个是不是有点多余。。。算了不说了。。。