基於mootools外掛實現遮罩層新手引導_Mootools

/*
--- >名稱：UserGuider
作者：
- Garland Yang
要求：[Core/Class、Core/Element.Style、Core/Element.Event、Core/Element.Dimensions]
版本：
- 1.0
...
*/
var UserGuider = new Class({
實作：[選項、事件],
選項：{
UserGuideList: new Array() ,
step: 0
},
初始化: function (options) {
this.setOptions(options);
this.step = this.options.step
},
createGuide: function () {
var self = this
$$('.userGuide').dispose();
var UserGuideList = this.options.UserGuideList; = UserGuideList[this.step] ;
if (config == null) {
return;
}
var ele = $$('.' config.className)if (ele == null) {
return
}
$$('.' config.className ' a').set('target', '_blank');上= ele.getCoordinates().top;
var right = ele.getCoordinates().right;
varbottom = ele.getCooperatives().bottom;左;
var width = ele.getCooperatives().width;
var height = ele.getCooperatives(). height;
var x = window.getScrollSize().x;
var y = window.getScrollSize().y;
this.createShadowDiv('shadowTop', left, 0, width, top);
this.createShadowDiv('shadowRight', right, 0, x - right, y);
this.createShadowDiv('shadowButtom', left, Bottom, width, y - Bottom); ('shadowLeft', 0, 0, left, y);
if (config.src != null) {
this.createUserGuideImg(左config.imgLeft, 頂部config.imgTop, config.src);
}
if (config.navUrl != null) {
this.createUserGuideNavImg(right - 50, Bottom, config.navUrl);
}
if (this.step > 0) {
this.createUserButton('userguide_undo', 'UserGuide/undo.png', this.step - 1);
}
if (this.step if (this.step this .createUserButton('userguide_next', 'UserGuide/next.png', this.step 1);
}
this.createUserButton('userguide_finish', 'UserGuide/finish.png', 10000); this.changeUserGuideButton();
if (config.src2 != null) {
this.createUserGuideImg(左config.imgLeft2, 頂部config.imgTop2, config.src2);
}
返回此;
},
createShadowDiv: function (id, left, top, width, height) {
var self = this;
var div = new Element('div');
div .set('id', id);
div.addClass('userGuide');
div.setStyles({
left: 左'px',
top: 頂部'px',
width: 寬度'px',
height: 高度'px',
位置：'絕對'，
'背景顏色'：'#000'，
'z-index' ：100，
不透明度：0.5，
過濾器：'alpha（不透明度= 50） )'
});
$$('body').adopt(div);
回傳這個;
},
createUserGuideNavImg: function (left, top, nav) {
var self = this;
var img = new Element('img')
img🎜>var img = new Element('img')
img🎜>img🎜>img🎜> .addClass('userGuideNav');
img.addClass('userGuide');
img.setStyles({
遊標: '指針',
'z-index': 10000,
left: 左邊'px',
top: 頂部'px',
位置：'絕對'
});
img.set('src', 'userguide/nav.png' );
img.addEvent('click', function () {
window.open(nav);
});
$$('body').adopt(img);
回傳這個;
},
createUserGuideImg: function (left, top, src) {
var self = this;
var img = new Element('img'); .addClass('userGuideImg');
img.addClass('userGuide');
img.setStyles({
'z-index': 1000,
left: 左邊'px',
top: 頂部'px',
位置: '絕對'
});
img.set('src', src);
$$('body').adopt( img);
回傳這個;
},
createUserButton: function (className, src, thisStep) {
var self = this;
var img = new Element('img');
img.addClass(className);
img.addClass('userGuide');
img.setStyles({
遊標: '指標',
'z-index': 1000000,
位置: '絕對'
});
img.set('src', src);
img.addEvent('click', function () {
self.step = thisStep;
self.createGuide();
});
$$('body').adopt(img);
回傳這個;
},
changeUserGuideGuideButton: function () {
var self = this;
var size = window.getSize();
var 滾動= window.getScroll();
varscrollSize = window.getScrollSize();
varscrollSize = window.getScrollSize();
$🎜>$ $('.userguide_finish').setStyles({
左: (size.x - 220) 'px',
上: (size.yscroll.y - 80) 'px'
});
$$('.userguide_next').setStyles({
左: (size.x - 420) 'px',
上: (size.yscroll.y - 80) 'px'
});
$$('.userguide_undo').setStyles({
左: (size.x - 620) 'px',
上: (size.yscroll.y - 80) ' px'
});
回傳這個;
}
});


呼叫方式

var UserGuider;
var UserGuideList = new Array({
className: 'step0',
src: 'UserGuide/step0.png',
imgTop: 50,
imgLeft: 50
, {
className: 'step1',
src: 'UserGuide/step1.png',
imgTop: -150,
imgLeft: 0,
src2: 'UserGuide/pic/1. gif',
imgTop2: 210,
imgLeft2: 450
}, {
className: 'step2',
src: 'UserGuide/step2.png', src: 'UserGuide/step2.png',
imgTop: 0 ,
imgLeft: -600,
navUrl: '/MyMessageCenter.aspx',
src2: 'UserGuide/pic/2.gif',
imgTop2: 110,
imgLeft2: 888 🎜>}, {
className: 'step3',
src: 'UserGuide/step3.png',
imgTop: -150,
imgLeft: 130,
navUrl: '/MyTask .aspx',
src2: 'UserGuide/pic/3.png',
imgTop2: -120,
imgLeft2: 250
});
window.addEvent('domready',function(){
UserGuider = new UserGuider({
UserGuideList: UserGuideList
})
UserGuider.createGuide();
})
UserGuider.createGuide();