插件代码
复制代码 代码如下:
/*
---
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 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: 'absolute'
});
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: 'absolute'
});
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: 'absolute'
});
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;
}
});
调用方式
复制代码 代码如下:
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',
imgtop: 0,
imgleft: -600,
navurl: '/mymessagecenter.aspx',
src2: 'userguide/pic/2.gif',
imgtop2: 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('domready',function(){
userguider = new userguider({
userguidelist: userguidelist
})
userguider.createguide();
});