最近因?yàn)轫?xiàng)目要用到首次進(jìn)入網(wǎng)站的操作提示，類似游戲引導(dǎo)。發(fā)現(xiàn)EnjoyHint挺好用的，網(wǎng)上文檔又比較少，于是做以下記錄。

成都創(chuàng)新互聯(lián)專注于西峰網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供西峰營(yíng)銷型網(wǎng)站建設(shè)，西峰網(wǎng)站制作、西峰網(wǎng)頁(yè)設(shè)計(jì)、西峰網(wǎng)站官網(wǎng)定制、小程序定制開(kāi)發(fā)服務(wù)，打造西峰網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供西峰網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

EnjoyHint，為網(wǎng)站或Web應(yīng)用程序提供最簡(jiǎn)單的方法來(lái)創(chuàng)建交互式教程和提示。它還可以用來(lái)突出和標(biāo)識(shí)應(yīng)用程序元素。

需要引用：

作者github及下載地址：
https://github.com/xbsoftware/enjoyhint

一、配置

selector : 選擇的元素（id，class，name）。
description : 提示的內(nèi)容。
keyCode ：當(dāng)event為key時(shí)，用來(lái)定義具體的keyCode值。
event_selector ：如果需要將事件（設(shè)置在“事件”屬性中）附加到其他選擇器，則可以使用此選項(xiàng)。
timeout ：超時(shí)-在一個(gè)元素被突出顯示之前的延遲。
shape:顯示的形狀，可使用(circle/reat)。
radius ：若shape是cicle，則可以使用該屬性定義圓大小。
margin ：shape是reat時(shí)，顯示面積的大小。
top | bottom | right | left：可以定義顯示的具體位置。
scrollAnimationSpeed：設(shè)置scroll的速度。
nextButton ：可以定義next按鈕的class和text。
skipButton ：可以定義skip按鈕的class和text。

var options = {
                    "next #block": 'Hello.',
                    "nextButton" : {className: "myNext", text: "NEXT"},
                    "skipButton" : {className: "mySkip", text: "SKIP"},

                }

showSkip ：(true | false)，是否顯示skip按鈕。
showNext ：(true | false)，是否顯示next按鈕。

二、非標(biāo)準(zhǔn)事件（event_type)：

1、auto : 你需要在第一步之后點(diǎn)擊第二步上的同一按鈕，然后進(jìn)入下一步。event：'click'；event_type:'auto'。

2、custom：需要在應(yīng)用程序代碼中按事件進(jìn)行下一步。比如：在應(yīng)用程序中加載了一些數(shù)據(jù)之后才進(jìn)入下一步，event_type使用custom，和trigger方法。

 $.get('/load/some_data', function(data){
            //trigger method has only one argument: event_name.(equal to the value of event property in step config)
            enjoyhint_instance.trigger('custom_event_name');
        });

3、next：event_type后使用，能看見(jiàn)下一步按鈕。

4、key：使用keyCode來(lái)定義如何進(jìn)入下一步。例如，event_type:key,'keyCode':13,表示回車進(jìn)入下一步。

三、方法

1、set：設(shè)置當(dāng)前的步驟配置。參數(shù)：配置
2、run：運(yùn)行當(dāng)前腳本。沒(méi)有參數(shù)
3、resume：恢復(fù)-從停止的步驟恢復(fù)腳本。沒(méi)有參數(shù)
4、getCurrentStep：返回當(dāng)前步驟索引
5、trigger：觸發(fā)器-在編寫此代碼后，您可以移動(dòng)到下一個(gè)步驟，或者用SelpHytt（Next Skip）結(jié)束。

四、事件

1、onStart: 第一步開(kāi)始的時(shí)候事件。
2、onEnd:最后一步結(jié)束的時(shí)候事件。
3、onSkip:用戶點(diǎn)擊skip的時(shí)候事件。

var enjoyhint_instance = new EnjoyHint({
  onEnd:function(){
    alert（'結(jié)束了！');
  }
});

4、onBeforeStart :在這一步開(kāi)始之前。例如要選中二級(jí)菜單，可使用點(diǎn)擊事件打開(kāi)第一級(jí)菜單。

var enjoyhint_script_steps = [
  {
    selector:'.some_btn',//jquery selector
    event:'click',
    description:'Click on this btn',
    onBeforeStart:function(){
      //do something
    }
  }
];

五、例子

1、常規(guī)使用例子

//initialize instance
var enjoyhint_instance = new EnjoyHint({});

//simple config. 
//Only one step - highlighting(with description) "New" button 
//hide EnjoyHint after a click on the button.
var enjoyhint_script_steps = [
  {
    'click .new_btn' : 'Click the "New" button to start creating your project'
  }  
];

//set script config
enjoyhint_instance.set(enjoyhint_script_steps);

//run Enjoyhint script
enjoyhint_instance.run();

其中的具體步驟（enjoyhint_script_steps），可以這樣寫：

1、

var enjoyhint_script_steps = [
  {
    'next .navbar-brand' : '歡迎來(lái)到我的搜索！讓我來(lái)引導(dǎo)你了解它的特點(diǎn)。',
    'nextButton' : {className: "myNext", text: "可以"},
    'skipButton' : {className: "mySkip", text: "不了!"}
  },
  {
    'key #mySearchButton' : "請(qǐng)輸入關(guān)鍵詞搜索，并按“Enter”進(jìn)去下一步",
    'keyCode' : 13
  },
  {
    'click .btn' : '點(diǎn)擊這個(gè)按鈕，切換下拉菜單，進(jìn)入下一步'
  },
  {
    'next .about' : '檢查可用的所有功能的列表',
    'shape': 'circle'
  },
  {
    'next .contact' : '您的反饋將不勝感激。',
    'shape': 'circle',
    'radius': 70,
    'showSkip' : false,
    'nextButton' : {className: "myNext", text: "知道了!"}
  }

];

2、

 var enjoyhint_script_data =[
            {
                selector:'#person_menu',
                event:'click',
                shape:'rect',
                left:400,
                top:200,

                description:'請(qǐng)點(diǎn)擊用戶',
                "skipButton" : {text: "退出"},
            },
            {
                selector:'#person_info',
                event:'click',
                description:'請(qǐng)點(diǎn)擊個(gè)人設(shè)置',
                "skipButton" : {text: "退出"},
            },
            {
                selector:'#menu_1',
                event_type:'key',
                                keyCode:13,
                "skipButton" : {text: "退出"},
                description:'請(qǐng)點(diǎn)擊項(xiàng)目?jī)?chǔ)備!',
             },
            {
                selector:'#menu_2',
                event:'click',
                "skipButton" : {text: "退出"},
                description:'請(qǐng)點(diǎn)擊基本信息維護(hù)!',
            },
            {
                selector:'#base_info',
                event:'custom',
                event_type:'next',
                "nextButton": {text:"下一步"},
                "skipButton" : {text: "退出"},
                description:'請(qǐng)點(diǎn)擊項(xiàng)目概況!',
            },

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：EnjoyHint，網(wǎng)站交互式引導(dǎo)插件api及例子-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://weahome.cn/article/dchihs.html