基于mootools插件實(shí)現(xiàn)遮罩層新手引導(dǎo)
更新時(shí)間:2012年05月24日 20:49:22 作者:
公司項(xiàng)目有這個(gè)需求,剛好這段時(shí)間在學(xué)習(xí)了mootools,于是把功能寫成了mootools插件,個(gè)人感覺mootools在這方面比jquery強(qiáng)多了
插件代碼
/*
---
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: '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;
}
});
調(diào)用方式
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();
});
復(fù)制代碼 代碼如下:
/*
---
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: '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;
}
});
調(diào)用方式
復(fù)制代碼 代碼如下:
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();
});
相關(guān)文章
Mootools 1.2教程 選項(xiàng)卡效果(Tabs)
今天將不只是受限于這個(gè)庫和一些基本的編程知識(shí),我們來做一個(gè)簡單的小項(xiàng)目。通過使用我們目前為止已經(jīng)學(xué)過的一些知識(shí),有幾種方式來創(chuàng)建當(dāng)鼠標(biāo)移上去或者點(diǎn)擊時(shí)顯示相應(yīng)內(nèi)容的tab。2009-09-09Mootools 1.2 手風(fēng)琴(Accordion)教程
繼續(xù)我們的“更多”(More)庫里面的插件教程,今天我們來學(xué)習(xí)一下可能是最流行最受歡迎的插件——手風(fēng)琴。2009-09-09Mootools 1.2教程 滑動(dòng)效果(Slide)
今天繼續(xù)我們的Mootools 1.2教程的第23課,我們今天來講一下Fx插件中的Fx.Slide。通過該插件,可以讓你把內(nèi)容以滑動(dòng)的方式顯示出來。它使用起來非常簡單,是你UI工具箱中一個(gè)很好的工具。2009-09-09背景圖跟隨鼠標(biāo)移動(dòng)的Mootools插件實(shí)現(xiàn)代碼
背景圖跟隨鼠標(biāo)移動(dòng)的Mootools插件實(shí)現(xiàn)代碼,學(xué)習(xí)mootools的朋友可以參考下。2011-12-12分享一個(gè)用Mootools寫的鼠標(biāo)滑過進(jìn)度條改變進(jìn)度值的實(shí)現(xiàn)代碼
分享一個(gè)用Mootools寫的鼠標(biāo)滑過進(jìn)度條改變進(jìn)度值的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-12-12Mootools 1.2教程 輸入過濾第一部分(數(shù)字)
今天我們來看看MooTools是怎樣使得過濾用戶輸入變得非常輕松。我們今天將講一些基本的數(shù)字過濾,明天再更深入地講講字符串過濾。2009-09-09MooTools 頁面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼
MooTools 頁面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-08-08