EnjoyHint ,網站交互式引導插件api及例子

最近因爲項目要用到首次進入網站的操作提示,類似遊戲引導。發現EnjoyHint挺好用的,網上文檔又比較少,於是做以下記錄。

EnjoyHint,爲網站或Web應用程序提供最簡單的方法來創建交互式教程和提示。它還可以用來突出和標識應用程序元素。

需要引用:

<link href="enjoyhint/enjoyhint.css" rel="stylesheet">

<script src="js/jquery-3.1.1.min.js"></script>
<script src="enjoyhint/enjoyhint.min.js"></script>

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

一、配置

selector : 選擇的元素(id,class,name)。
description : 提示的內容。
keyCode :當event爲key時,用來定義具體的keyCode值。
event_selector :如果需要將事件(設置在“事件”屬性中)附加到其他選擇器,則可以使用此選項。
timeout :超時-在一個元素被突出顯示之前的延遲。
shape:顯示的形狀,可使用(circle/reat)。
radius :若shape是cicle,則可以使用該屬性定義圓大小。
margin :shape是reat時,顯示面積的大小。
top | bottom | right | left:可以定義顯示的具體位置。
scrollAnimationSpeed:設置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按鈕。

二、非標準事件(event_type):

1、auto : 你需要在第一步之後點擊第二步上的同一按鈕,然後進入下一步。event:'click';event_type:'auto'。

2、custom:需要在應用程序代碼中按事件進行下一步。比如:在應用程序中加載了一些數據之後才進入下一步,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後使用,能看見下一步按鈕。

4、key:使用keyCode來定義如何進入下一步。例如,event_type:key,'keyCode':13,表示回車進入下一步。

三、方法

1、set:設置當前的步驟配置。參數:配置
2、run:運行當前腳本。沒有參數
3、resume:恢復-從停止的步驟恢復腳本。沒有參數
4、getCurrentStep:返回當前步驟索引
5、trigger:觸發器-在編寫此代碼後,您可以移動到下一個步驟,或者用SelpHytt(Next Skip)結束。

四、事件

1、onStart: 第一步開始的時候事件。
2、onEnd:最後一步結束的時候事件。
3、onSkip:用戶點擊skip的時候事件。

var enjoyhint_instance = new EnjoyHint({
  onEnd:function(){
    alert('結束了!');
  }
});

4、onBeforeStart :在這一步開始之前。例如要選中二級菜單,可使用點擊事件打開第一級菜單。

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

五、例子

1、常規使用例子

//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' : '歡迎來到我的搜索!讓我來引導你瞭解它的特點。',
    'nextButton' : {className: "myNext", text: "可以"},
    'skipButton' : {className: "mySkip", text: "不了!"}
  },
  {
    'key #mySearchButton' : "請輸入關鍵詞搜索,並按“Enter”進去下一步",
    'keyCode' : 13
  },
  {
    'click .btn' : '點擊這個按鈕,切換下拉菜單,進入下一步'
  },
  {
    '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:'請點擊用戶',
                "skipButton" : {text: "退出"},
            },
            {
                selector:'#person_info',
                event:'click',
                description:'請點擊個人設置',
                "skipButton" : {text: "退出"},
            },
            {
                selector:'#menu_1',
                event_type:'key',
                                keyCode:13,
                "skipButton" : {text: "退出"},
                description:'請點擊項目儲備!',
             },
            {
                selector:'#menu_2',
                event:'click',
                "skipButton" : {text: "退出"},
                description:'請點擊基本信息維護!',
            },
            {
                selector:'#base_info',
                event:'custom',
                event_type:'next',
                "nextButton": {text:"下一步"},
                "skipButton" : {text: "退出"},
                description:'請點擊項目概況!',
            },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章