本人大二小學生一枚，大二的這個暑假時間有幸跟到一位老師做一些項目有關(guān)的事情。以上背景。
intro.js可以更好地介紹網(wǎng)站和功能，并為您的項目提供分步指南。
(點擊上方文字可以鏈接到github)
基本功能嘛，相信大家能夠搜索這個名字一定是慕名而來，在這里就不多講了，在Github倉庫中example文件夾中可以打開index的html文件，可以看到各種引導形式的web表現(xiàn)。
這篇文章主要講以下intro.js的以下幾點滴?。?/p>
1、如何插入圖片
? ? ? ? 只需將data－intro中加入img標簽即可，就按照最標準的html標記語言來寫就OK。例如：data-intro＝“balabala......nuo,this is a photo<img src='./1.png'>.”
2、如何跳頁引導????????
? ? ? ? 跳頁引導是一種很常見的web引導方式，在進行頁面轉(zhuǎn)換的時候就要傳遞相應的web頁面參數(shù)告訴瀏覽器‘我要跳轉(zhuǎn)了 老兄 你繼續(xù)吧’
? ? ? ? 那么在跳轉(zhuǎn)的頁面中你就需要做一些工作來進行喊話：
? ? ? ? 喊話方式A：直接型（直接定義url的傳遞變量）
????????????????????????????????href="second.html?multipage=true"
? ? ? ? 喊話方式B：羞澀型（增加一個js標簽，把這個函數(shù)加進去，發(fā)送參數(shù)，順便把最后一步的結(jié)束標簽替換成下一頁）
? ? ? ????? introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
? ? ? ? ? window.location.href = 'second.html?multipage=true';
? ? ? ? });
3、如何從制定的步數(shù)開始引導
????????這個是用兩種官方方式的one is goToStep()；another is goToStepNumber()
? ? ? ? 用起來比較順手的是introJs().goToStepNumber(1).start()；這種方式的話在括號中直接定義出需要跳轉(zhuǎn)步驟的序號（data-step）即可，
4、利用js進行對按鈕的監(jiān)聽，若有此按鈕則進行引導，若無則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);
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? //調(diào)用
? ? ? ? ? ? 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、引導中對于引導文字的設計
? ? ? ? 呃呃，程序員加理工男在這說這個是不是有點多余。。。算了不說了。。。
