mootools 플러그인_Mootools를 기반으로 마스크 레이어를 구현하는 초보자 가이드

插件代码

复aze代码 代码如下:

/*
---
이름: UserGuider
작성자:
- Garland Yang
필요: [Core/Class, Core/Element.Style, Core/Element.Event, Core/Element.Dimensions]
버전:
- 1.0
...
*/
var UserGuider = new Class({
구현: [옵션, 이벤트],
옵션: {
UserGuideList: new Array() ,
단계: 0
},
초기화: 함수(옵션) {
this.setOptions(옵션)
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(). 왼쪽;
var width = ele.getCoordinates().width;
var height = ele.getCoordinates().height;
var x = window.getScrollSize().x;
var y = window.getScrollSize().y;
this.createShadowDiv('shadowTop', 왼쪽, 0, 너비, 위쪽);
this.createShadowDiv('shadowRight', right, 0, x - right, y);
this.createShadowDiv('shadowButtom', 왼쪽, 아래쪽, 너비, y - 아래쪽);
this.createShadowDiv('shadowLeft', 0, 0, 왼쪽, y);
if (config.src != null) {
this.createUserGuideImg(왼쪽 config.imgLeft, 위쪽 config.imgTop, config.src);
}
if (config.navUrl != null) {
this.createUserGuideNavImg(오른쪽 - 50, 하단, 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(왼쪽 config.imgLeft2, 위쪽 config.imgTop2, config.src2);
}
이것을 반환하세요.
},
createShadowDiv: 함수(id, 왼쪽, 위쪽, 너비, 높이) {
var self = this;
var div = new Element('div');
div.set('id', id);
div.addClass('userGuide');
div.setStyles({
왼쪽: 왼쪽 'px',
top: 위쪽 'px',
width: 너비 'px',
height: 높이 'px',
위치: '절대',
'배경색': '#000',
'z-index': 100,
불투명도: 0.5,
필터: '알파(불투명도=50) )'
});
$$('body').adopt(div);
이것을 돌려주세요;
},
createUserGuideNavImg: 함수(왼쪽, 위쪽, 탐색) {
var self = this;
var img = new Element('img');
img.addClass('userGuideNav');
img.addClass('userGuide');
img.setStyles({
커서: '포인터',
'z-index': 10000,
왼쪽: 왼쪽 'px',
상단: 상단 'px',
위치: '절대'
});
img.set('src', 'userguide/nav.png');
img.addEvent('click', function () {
window.open(nav);
});
$$('body').adopt(img);
이것을 돌려주세요;
},
createUserGuideImg: 함수(왼쪽, 위쪽, src) {
var self = this;
var img = new Element('img');
img.addClass('userGuideImg');
img.addClass('userGuide');
img.setStyles({
'z-index': 1000,
왼쪽: 왼쪽 'px',
top: 위쪽 'px',
위치: '절대'
});
img.set('src', src);
$$('body').adopt(img);
이것을 돌려주세요;
},
createUserButton: 함수(className, src, thisStep) {
var self = this;
var img = new Element('img');
img.addClass(클래스이름);
img.addClass('userGuide');
img.setStyles({
커서: '포인터',
'z-index': 1000000,
위치: '절대'
});
img.set('src', src);
img.addEvent('click', function () {
self.step = thisStep;
self.createGuide();
});
$$('body').adopt(img);
이것을 돌려주세요;
},
changeUserGuideButton: function () {
var self = this;
var 크기 = window.getSize();
var scroll = window.getScroll();
var scrollSize = window.getScrollSize();
$$('.userguide_finish').setStyles({
왼쪽: (size.x - 220) 'px',
상단: (size.y 스크롤.y - 80) 'px'
});
$$('.userguide_next').setStyles({
왼쪽: (size.x - 420) 'px',
위쪽: (size.y 스크롤.y - 80) 'px'
});
$$('.userguide_undo').setStyles({
왼쪽: (size.x - 620) 'px',
위쪽: (size.y 스크롤.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',
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();
});