Beginner guide of Mask Layer Based on the mootools plug-in

Plug-in code
Copy codeThe Code is as follows:
/*
---
Name: UserGuider
Authors:
-Garland Yang
Requires: [Core/Class, Core/Element. Style, Core/Element. Event, Core/Element. Dimensions]
Version:
-1.0
...
*/
Var UserGuider = new Class ({
Implements: [Options, Events],
Options :{
UserGuideList: new Array (),
Step: 0
},
Initialize: function (options ){
This. setOptions (options );
This. step = this. options. step;
},
CreateGuide: function (){
Var self = this;
$ ('. Userguide'). dispose ();
Var UserGuideList = this. options. UserGuideList;
Var config = UserGuideList [this. step];
If (config = null ){
Return;
}
Var ele = $ ('.' + config. className) [0];
If (ele = null ){
Return;
}
$ ('.' + Config. className + 'A'). set ('target', '_ blank ');
Var top = ele. getCoordinates (). top;
Var right = ele. getCoordinates (). right;
Var bottom = ele. getCoordinates (). bottom;
Var left = ele. getCoordinates (). left;
Var width = ele. getCoordinates (). width;
Var height = ele. getCoordinates (). 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 );
This. createShadowDiv ('shadowleft', 0, 0, left, y );
If (config. src! = Null ){
This. createUserGuideImg (left + config. imgLeft, top + 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 <UserGuideList. length-1 ){
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 (left + config. imgLeft2, top + config. imgTop2, config. src2 );
}
Return this;
},
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: left + 'px ',
Top: top + 'px ',
Width: width + 'px ',
Height: height + 'px ',
Position: 'absolute ',
'Background-color': '#000 ',
'Z-Index': 100,
Opacity: 0.5,
Filter: 'Alpha (opacity = 50 )'
});
$ ('Body'). adopt (div );
Return this;
},
CreateUserGuideNavImg: function (left, top, nav ){
Var self = this;
Var img = new Element ('img ');
Img. addClass ('userguidenav ');
Img. addClass ('userguide ');
Img. setStyles ({
Cursor: 'pointer ',
'Z-Index': 10000,
Left: left + 'px ',
Top: top + 'px ',
Position: 'abort'
});
Img. set ('src', 'userguide/nav.png ');
Img. addEvent ('click', function (){
Window. open (nav );
});
$ ('Body'). adopt (img );
Return this;
},
CreateUserGuideImg: function (left, top, src ){
Var self = this;
Var img = new Element ('img ');
Img. addClass ('userguideimg ');
Img. addClass ('userguide ');
Img. setStyles ({
'Z-Index': 1000,
Left: left + 'px ',
Top: top + 'px ',
Position: 'abort'
});
Img. set ('src', src );
$ ('Body'). adopt (img );
Return this;
},
CreateUserButton: function (className, src, thisStep ){
Var self = this;
Var img = new Element ('img ');
Img. addClass (className );
Img. addClass ('userguide ');
Img. setStyles ({
Cursor: 'pointer ',
'Z-Index': 1000000,
Position: 'abort'
});
Img. set ('src', src );
Img. addEvent ('click', function (){
Self. step = thisStep;
Self. createGuide ();
});
$ ('Body'). adopt (img );
Return this;
},
ChangeUserGuideButton: function (){
Var self = this;
Var size = window. getSize ();
Var scroll = window. getScroll ();
Var scrollSize = window. getScrollSize ();
$ ('. Userguide_finish'). setStyles ({
Left: (size. x-220) + 'px ',
Top: (size. y + scroll. y-80) + 'px'
});
$ ('. Userguide_next'). setStyles ({
Left: (size. x-420) + 'px ',
Top: (size. y + scroll. y-80) + 'px'
});
$ ('. Userguide_undo'). setStyles ({
Left: (size. x-620) + 'px ',
Top: (size. y + scroll. y-80) + 'px'
});
Return this;
}
});

Call Method
Copy codeThe Code is as follows:
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 ',
IMG top2: 210,
ImgLeft2: 450
},{
ClassName: 'step2 ',
Src: 'userguide/step2.png ',
ImgTop: 0,
ImgLeft:-600,
NavUrl: '/MyMessageCenter. aspx ',
Src2: 'userguide/pic/2.gif ',
IMG top2: 110,
ImgLeft2: 80
},{
ClassName: 'step3 ',
Src: 'userguide/step3.png ',
ImgTop:-150,
ImgLeft: 130,
NavUrl: '/MyTaskSearch. aspx ',
Src2: 'userguide/pic/3.png ',
ImgTop2:-120,
ImgLeft2: 250
});
Window. addEvent ('domainready', function (){
UserGuider = new UserGuider ({
UserGuideList: UserGuideList
})
UserGuider. createGuide ();
});