用mootools插件类方式实现遮罩层新手引导
公司项目有这个需求,刚好这段时间在学习了mootools,于是把功能写成了mootools插件,个人感觉mootools在这方面比jquery强多了。
插件代码
1 /* 2 --- 3 4 name: UserGuider 5 6 authors: 7 - Garland Yang 8 9 requires: [Core/Class, Core/Element.Style, Core/Element.Event, Core/Element.Dimensions] 10 11 version: 12 - 1.0 13 ... 14 */ 15 16 var UserGuider = new Class({ 17 18 Implements: [Options, Events], 19 20 options: { 21 UserGuideList: new Array(), 22 step: 0 23 }, 24 25 initialize: function (options) { 26 this.setOptions(options); 27 this.step = this.options.step; 28 }, 29 createGuide: function () { 30 var self = this; 31 $$('.userGuide').dispose(); 32 var UserGuideList = this.options.UserGuideList; 33 var config = UserGuideList[this.step]; 34 if (config == null) { 35 return; 36 } 37 var ele = $$('.' + config.className)[0]; 38 if (ele == null) { 39 return; 40 } 41 $$('.' + config.className + ' a').set('target', '_blank'); 42 var top = ele.getCoordinates().top; 43 var right = ele.getCoordinates().right; 44 var bottom = ele.getCoordinates().bottom; 45 var left = ele.getCoordinates().left; 46 var width = ele.getCoordinates().width; 47 var height = ele.getCoordinates().height; 48 var x = window.getScrollSize().x; 49 var y = window.getScrollSize().y; 50 this.createShadowDiv('shadowTop', left, 0, width, top); 51 this.createShadowDiv('shadowRight', right, 0, x - right, y); 52 this.createShadowDiv('shadowButtom', left, bottom, width, y - bottom); 53 this.createShadowDiv('shadowLeft', 0, 0, left, y); 54 if (config.src != null) { 55 this.createUserGuideImg(left + config.imgLeft, top + config.imgTop, config.src); 56 } 57 if (config.navUrl != null) { 58 this.createUserGuideNavImg(right - 50, bottom, config.navUrl); 59 } 60 if (this.step > 0) { 61 this.createUserButton('userguide_undo', 'UserGuide/undo.png', this.step - 1); 62 } 63 if (this.step < UserGuideList.length - 1) { 64 this.createUserButton('userguide_next', 'UserGuide/next.png', this.step + 1); 65 } 66 this.createUserButton('userguide_finish', 'UserGuide/finish.png', 10000); 67 this.changeUserGuideButton(); 68 if (config.src2 != null) { 69 this.createUserGuideImg(left + config.imgLeft2, top + config.imgTop2, config.src2); 70 } 71 return this; 72 }, 73 createShadowDiv: function (id, left, top, width, height) { 74 var self = this; 75 var div = new Element('div'); 76 div.set('id', id); 77 div.addClass('userGuide'); 78 div.setStyles({ 79 left: left + 'px', 80 top: top + 'px', 81 width: width + 'px', 82 height: height + 'px', 83 position: 'absolute', 84 'background-color': '#000', 85 'z-index': 100, 86 opacity: 0.5, 87 filter: 'alpha(opacity=50)' 88 }); 89 $$('body').adopt(div); 90 return this; 91 }, 92 createUserGuideNavImg: function (left, top, nav) { 93 var self = this; 94 var img = new Element('img'); 95 img.addClass('userGuideNav'); 96 img.addClass('userGuide'); 97 img.setStyles({ 98 cursor: 'pointer', 99 'z-index': 10000, 100 left: left + 'px', 101 top: top + 'px', 102 position: 'absolute' 103 }); 104 105 img.set('src', 'userguide/nav.png'); 106 img.addEvent('click', function () { 107 window.open(nav); 108 }); 109 110 $$('body').adopt(img); 111 return this; 112 }, 113 createUserGuideImg: function (left, top, src) { 114 var self = this; 115 var img = new Element('img'); 116 img.addClass('userGuideImg'); 117 img.addClass('userGuide'); 118 img.setStyles({ 119 'z-index': 1000, 120 left: left + 'px', 121 top: top + 'px', 122 position: 'absolute' 123 }); 124 img.set('src', src); 125 $$('body').adopt(img); 126 return this; 127 }, 128 createUserButton: function (className, src, thisStep) { 129 var self = this; 130 var img = new Element('img'); 131 img.addClass(className); 132 img.addClass('userGuide'); 133 img.setStyles({ 134 cursor: 'pointer', 135 'z-index': 1000000, 136 position: 'absolute' 137 }); 138 img.set('src', src); 139 img.addEvent('click', function () { 140 self.step = thisStep; 141 self.createGuide(); 142 }); 143 $$('body').adopt(img); 144 return this; 145 }, 146 changeUserGuideButton: function () { 147 var self = this; 148 var size = window.getSize(); 149 var scroll = window.getScroll(); 150 var scrollSize = window.getScrollSize(); 151 $$('.userguide_finish').setStyles({ 152 left: (size.x - 220) + 'px', 153 top: (size.y + scroll.y - 80) + 'px' 154 }); 155 $$('.userguide_next').setStyles({ 156 left: (size.x - 420) + 'px', 157 top: (size.y + scroll.y - 80) + 'px' 158 }); 159 $$('.userguide_undo').setStyles({ 160 left: (size.x - 620) + 'px', 161 top: (size.y + scroll.y - 80) + 'px' 162 }); 163 return this; 164 } 165 166 167 });
调用方式
1 var UserGuider; 2 var UserGuideList = new Array({ 3 className: 'step0', 4 src: 'UserGuide/step0.png', 5 imgTop: 50, 6 imgLeft: 50 7 }, { 8 className: 'step1', 9 src: 'UserGuide/step1.png', 10 imgTop: -150, 11 imgLeft: 0, 12 src2: 'UserGuide/pic/1.gif', 13 imgTop2: 210, 14 imgLeft2: 450 15 }, { 16 className: 'step2', 17 src: 'UserGuide/step2.png', 18 imgTop: 0, 19 imgLeft: -600, 20 navUrl: '/MyMessageCenter.aspx', 21 src2: 'UserGuide/pic/2.gif', 22 imgTop2: 110, 23 imgLeft2: 80 24 }, { 25 className: 'step3', 26 src: 'UserGuide/step3.png', 27 imgTop: -150, 28 imgLeft: 130, 29 navUrl: '/MyTaskSearch.aspx', 30 src2: 'UserGuide/pic/3.png', 31 imgTop2: -120, 32 imgLeft2: 250 33 }); 34 window.addEvent('domready',function(){ 35 UserGuider = new UserGuider({ 36 UserGuideList: UserGuideList 37 }) 38 UserGuider.createGuide(); 39 });
杨伽蓝的blog,转载请注明出处