git源码：https://github.com/usablica/intro.js
引入插件js、css文件
在要引导的html标签里加入分布引导的属性
data-step="1" data-intro="Ok, wasn't that fun?" data-position='right'data-step：第几步
data-intro：引导提示语
data-position：引导语所在位于引导标签的位置
调用start()方法启用即可
我们继续粗浅的看下intro.js,插件中提供了以下这些属性
this._options = {
/* Next button label in tooltip box */
nextLabel: 'Next →',
/* Previous button label in tooltip box */
prevLabel: '← Back',
/* Skip button label in tooltip box */
skipLabel: 'Skip',
/* Done button label in tooltip box */
doneLabel: 'Done',
/* Hide previous button in the first step? Otherwise, it will be disabled button. */
hidePrev: false,
/* Hide next button in the last step? Otherwise, it will be disabled button. */
hideNext: false,
/* Default tooltip box position */
tooltipPosition: 'bottom',
/* Next CSS class for tooltip boxes */
tooltipClass: '',
/* CSS class that is added to the helperLayer */
highlightClass: '',
/* Close introduction when pressing Escape button? */
exitOnEsc: true,
/* Close introduction when clicking on overlay layer? */
exitOnOverlayClick: true,
/* Show step numbers in introduction? */
showStepNumbers: true,
/* Let user use keyboard to navigate the tour? */
keyboardNavigation: true,
/* Show tour control buttons? */
showButtons: true,
/* Show tour bullets? */
showBullets: true,
/* Show tour progress? */
showProgress: false,
/* Scroll to highlighted element? */
scrollToElement: true,
/* Set the overlay opacity */
overlayOpacity: 0.8,
/* Padding to add after scrolling when element is not in the viewport (in pixels) */
scrollPadding: 30,
/* Precedence of positions, when auto is enabled */
positionPrecedence: ["bottom", "top", "right", "left"],
/* Disable an interaction with element? */
disableInteraction: false,
/* Default hint position */
hintPosition: 'top-middle',
/* Hint button label */
hintButtonLabel: 'Got it',
/* Adding animation to hints? */
hintAnimation: true
};并提供了一些供我们使用的方法去改变这些属性值
introJs.fn = IntroJs.prototype = {
clone: function () {
return new IntroJs(this);
},
setOption: function(option, value) {
this._options[option] = value;
return this;
},
setOptions: function(options) {
this._options = _mergeOptions(this._options, options);
return this;
},
start: function () {
_introForElement.call(this, this._targetElement);
return this;
},
goToStep: function(step) {
_goToStep.call(this, step);
return this;
},
addStep: function(options) {
if (!this._options.steps) {
this._options.steps = [];
}
this._options.steps.push(options);
return this;
},
addSteps: function(steps) {
if (!steps.length) return;
for(var index = 0; index < steps.length; index++) {
this.addStep(steps[index]);
}
return this;
},
goToStepNumber: function(step) {
_goToStepNumber.call(this, step);
return this;
},
nextStep: function() {
_nextStep.call(this);
return this;
},
previousStep: function() {
_previousStep.call(this);
return this;
},
exit: function() {
_exitIntro.call(this, this._targetElement);
return this;
},
refresh: function() {
// re-align intros
_setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer'));
_setHelperLayerPosition.call(this, document.querySelector('.introjs-tooltipReferenceLayer'));
//re-align hints
_reAlignHints.call(this);
return this;
},
onbeforechange: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._introBeforeChangeCallback = providedCallback;
} else {
throw new Error('Provided callback for onbeforechange was not a function');
}
return this;
},
onchange: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._introChangeCallback = providedCallback;
} else {
throw new Error('Provided callback for onchange was not a function.');
}
return this;
},
onafterchange: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._introAfterChangeCallback = providedCallback;
} else {
throw new Error('Provided callback for onafterchange was not a function');
}
return this;
},
oncomplete: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._introCompleteCallback = providedCallback;
} else {
throw new Error('Provided callback for oncomplete was not a function.');
}
return this;
},
onhintsadded: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._hintsAddedCallback = providedCallback;
} else {
throw new Error('Provided callback for onhintsadded was not a function.');
}
return this;
},
onhintclick: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._hintClickCallback = providedCallback;
} else {
throw new Error('Provided callback for onhintclick was not a function.');
}
return this;
},
onhintclose: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._hintCloseCallback = providedCallback;
} else {
throw new Error('Provided callback for onhintclose was not a function.');
}
return this;
},
onexit: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._introExitCallback = providedCallback;
} else {
throw new Error('Provided callback for onexit was not a function.');
}
return this;
},
addHints: function() {
_populateHints.call(this, this._targetElement);
return this;
},
hideHint: function (stepId) {
_hideHint.call(this, stepId);
return this;
},
hideHints: function () {
_hideHints.call(this);
return this;
},
showHint: function (stepId) {
_showHint.call(this, stepId);
return this;
},
showHints: function () {
_showHints.call(this);
return this;
},
removeHints: function () {
_removeHints.call(this);
return this;
},
removeHint: function (stepId) {
_removeHint.call(this, stepId);
return this;
}
};我们可以使用其中的setOption方法来更改其中的属性值
introJs().setOption("prevLabel","上一步").start();也可以在其中操作中添加一些我们需要的事件
introJs().oncomplete(completeYindao).start();
function completeYindao(){
alert("完成引导操作");
return false;
}该插件功能单纯从分步引导上来说还是比较可观的，提供的方法比较多且全，支持插入事件以及更改模态框的css。但也有一些比较烦的地方，就是提示若是加在靠边的元素时，会发现有部分提示被挡掉，所以导致在引用插件时对原有页面的元素样式有所改动才能使该提示层比较完整的显示出来。