SoFunction
Updated on 2025-04-11

Implementing mask layer novice boot based on mootools plug-in


/*
---
name: UserGuider
authors:
- Garland Yang
requires: [Core/Class, Core/, Core/, Core/]
version:
- 1.0
...
*/
var UserGuider = new Class({
Implements: [Options, Events],
options: {
UserGuideList: new Array(),
step: 0
},
initialize: function (options) {
(options);
= ;
},
createGuide: function () {
var self = this;
$$('.userGuide').dispose();
var UserGuideList = ;
var config = UserGuideList[];
if (config == null) {
return;
}
var ele = $$('.' + )[0];
if (ele == null) {
return;
}
$$('.' + + ' a').set('target', '_blank');
var top = ().top;
var right = ().right;
var bottom = ().bottom;
var left = ().left;
var width = ().width;
var height = ().height;
var x = ().x;
var y = ().y;
('shadowTop', left, 0, width, top);
('shadowRight', right, 0, x - right, y);
('shadowButtom', left, bottom, width, y - bottom);
('shadowLeft', 0, 0, left, y);
if ( != null) {
(left + , top + , );
}
if ( != null) {
(right - 50, bottom, );
}
if ( > 0) {
('userguide_undo', 'UserGuide/', - 1);
}
if ( < - 1) {
('userguide_next', 'UserGuide/', + 1);
}
('userguide_finish', 'UserGuide/', 10000);
();
if (config.src2 != null) {
(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');
('id', id);
('userGuide');
({
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');
('userGuideNav');
('userGuide');
({
cursor: 'pointer',
'z-index': 10000,
left: left + 'px',
top: top + 'px',
position: 'absolute'
});
('src', 'userguide/');
('click', function () {
(nav);
});
$$('body').adopt(img);
return this;
},
createUserGuideImg: function (left, top, src) {
var self = this;
var img = new Element('img');
('userGuideImg');
('userGuide');
({
'z-index': 1000,
left: left + 'px',
top: top + 'px',
position: 'absolute'
});
('src', src);
$$('body').adopt(img);
return this;
},
createUserButton: function (className, src, thisStep) {
var self = this;
var img = new Element('img');
(className);
('userGuide');
({
cursor: 'pointer',
'z-index': 1000000,
position: 'absolute'
});
('src', src);
('click', function () {
= thisStep;
();
});
$$('body').adopt(img);
return this;
},
changeUserGuideButton: function () {
var self = this;
var size = ();
var scroll = ();
var scrollSize = ();
$$('.userguide_finish').setStyles({
left: ( - 220) + 'px',
top: ( + - 80) + 'px'
});
$$('.userguide_next').setStyles({
left: ( - 420) + 'px',
top: ( + - 80) + 'px'
});
$$('.userguide_undo').setStyles({
left: ( - 620) + 'px',
top: ( + - 80) + 'px'
});
return this;
}
});