javascript 实现的ToolTip

  1 /* ToolTip */
  2 GLOBAL.namespace("Component");
  3 GLOBAL.Component.EnumType ={
  4    StyleHeadDefault:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px‘},
  5    StyleBodyDefault:{‘backgroundColor‘:‘#ffffff‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px 2px‘},
  6    StyleBoxDefault:{‘border‘ :‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘},
  7    StyleHeadDark:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px‘},
  8    StyleBodyDark:{‘backgroundColor‘:‘#8a8a8a‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘ :‘1px 2px‘},
  9    StyleBoxDark:{‘border‘ :‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘},
 10    StyleHeadYellow:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px‘},
 11    StyleBodyYellow:{‘backgroundColor‘:‘#ffffa9‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘ :‘1px 2px‘},
 12    StyleBoxYellow:{‘border‘:‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘},
 13    StyleHeadGreen:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘ : ‘150px‘,‘padding‘:‘1px‘},
 14    StyleBodyGreen:{‘backgroundColor‘:‘#4db135‘,‘color‘:‘#ffffff‘,‘width‘:‘150px‘,‘padding‘ :‘1px 2px‘},
 15    StyleBoxGreen:{‘border‘:‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘},
 16    StyleHeadBlue:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px‘},
 17    StyleBodyBlue:{‘backgroundColor‘:‘#4182c2‘,‘color‘:‘#ffffff‘,‘width‘:‘150px‘,‘padding‘ :‘1px 2px‘},
 18    StyleBoxBlue:{‘border‘:‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘},
 19    StyleRadius:{‘borderRadius‘: ‘4px‘},
 20    StyleShadow:{‘box_shadow‘:‘gray 0.33em 0.25em 0.25em‘},
 21    PlaceWTop:‘top‘,
 22    PlaceWRight:‘right‘,
 23    PlaceWLeft:‘left‘,
 24    PlaceWButton:‘button‘,
 25    PlaceBT:‘T‘,
 26    PlaceBC:‘C‘,
 27    PlaceBB:‘B‘
 28 };
 29 
 30 GLOBAL.Component.ToolTip = function(nodeID) {
 31     this._tipNode = GLOBAL.Dom.get(nodeID);
 32     if(this._tipNode == null)
 33       return;
 34     /*toolTip基础结构*/
 35     this._tipBox = null;
 36     this._tipBoxID = nodeID+"tipBox";
 37     this._tipHead=null;
 38     this._tipHeadID = nodeID+"tipHead";
 39     this._tipBody = null;
 40     this._tipBodyID = nodeID+"tipBody";
 41     this._tipBodyContent = null;
 42     this._tipBodyContentID = nodeID +"tipBodyContent";
 43     this._tipScroll = null;
 44     this._tipClose = null;
 45     this._tipCloseID = nodeID+"tipClose";
 46     /*操作特性*/
 47     this._isClear = 0;
 48     this._isEventClear = 0;
 49     this._isHide = 1;
 50     this._isTimer = 0;
 51     this._timerID = null;
 52     this._EventMap = {};
 53     this._timerMilliseconds = 2000;
 54     this._isShowClose = 1;
 55     this._isAuto = 1;
 56     /*显示特性*/
 57     this._tipBoxStyle = GLOBAL.Component.EnumType.StyleBoxDefault;
 58     this._tipHeadStyle = GLOBAL.Component.EnumType.StyleHeadDefault;
 59     this._tipBodyStyle = GLOBAL.Component.EnumType.StyleBodyDefault;
 60     /*位置特性*/
 61     this._placeW = GLOBAL.Component.EnumType.PlaceWButton;
 62     this._placeB = GLOBAL.Component.EnumType.PlaceBC;
 63     /*创建Div*/
 64     this._createContainer();
 65     /*设置内容，*/
 66     this.setTip();
 67     /*设置样式*/
 68     this.setStyle();
 69     /*并设置高度，添加滚动条*/
 70     this.scaleHeight();
 71     /*设置显示方式*/
 72     this.setShowType();
 73     /*绑定事件*/
 74     this.bindEvent();
 75 };
 76 /*外部调用显示paramters{
 77 isEventClear,isTimer,timerMilliseconds,placeW,placeB,isShowClose,isAuto}*/
 78 GLOBAL.Component.ToolTip.prototype.showToolTip = function(headHtml,bodyHtml,parameters) {
 79    this.setTip(headHtml,bodyHtml);
 80    this.scaleHeight();
 81    this.setShowType(parameters);
 82    this.bindEvent();
 83 };
 84 /*创建Div*/
 85 GLOBAL.Component.ToolTip.prototype._createContainer = function() {
 86     this._tipBox = document.createElement("div");
 87     this._tipBox.id = this._tipBoxID;
 88     GLOBAL.Dom.setStyle(this._tipBox,{‘position‘:‘absolute‘,‘visibility‘:‘hidden‘,‘overflow‘:‘hidden‘});
 89     this._tipHead = document.createElement("div");
 90     this._tipHead.id = this._tipHeadID;
 91     GLOBAL.Dom.setStyle(this._tipHead,{‘position‘:‘absolute‘,‘top‘:‘0px‘,‘left‘:‘0px‘,‘width‘:‘100%‘});
 92     this._tipBox.appendChild(this._tipHead);
 93     this._tipBody = document.createElement("div");
 94     this._tipBody.id = this._tipBodyID;
 95     GLOBAL.Dom.setStyle(this._tipBody,{‘position‘:‘absolute‘,‘left‘:‘0px‘,‘width‘:‘100%‘});
 96     this._tipBox.appendChild(this._tipBody);
 97     this._tipBodyContent = document.createElement("div");
 98     this._tipBodyContent.id = this._tipBodyContentID;
 99     this._tipBody.appendChild(this._tipBodyContent);
100     this._tipClose = document.createElement("button");
101     this._tipClose.id = this._tipCloseID;
102     this._tipClose.innerHTML = "×";
103     GLOBAL.Dom.setStyle(this._tipClose,{‘position‘:‘absolute‘,‘top‘:‘0px‘,‘right‘:‘0px‘,‘color‘:‘#FF0000‘,‘backgroundColor‘:‘transparent‘,‘border‘:‘1px solid transparent‘,‘padding‘: ‘0px‘});
104     this._tipBox.appendChild(this._tipClose);
105     document.body.appendChild(this._tipBox);
106 };
107 
108 GLOBAL.Component.ToolTip.prototype.setStyle = function(tipBoxStyle,tipHeadStyle,tipBodyStyle) {
109     this._tipBoxStyle = tipBoxStyle || this._tipBoxStyle;
110     this._tipHeadStyle = tipHeadStyle || this._tipHeadStyle;
111     this._tipBodyStyle = tipBodyStyle || this._tipBodyStyle;
112     GLOBAL.Dom.setStyle(this._tipBox,this._tipBoxStyle);
113     GLOBAL.Dom.setStyle(this._tipHead,this._tipHeadStyle);
114     GLOBAL.Dom.setStyle(this._tipBody,this._tipBodyStyle);
115 };
116 
117 GLOBAL.Component.ToolTip.prototype.setTip = function(headHtml,bodyHtml) {
118    var v_headHtml = headHtml || "";
119    var v_bodyHtml = bodyHtml || "Default body";
120    this._tipHead.innerHTML = v_headHtml;
121    this._tipBodyContent.innerHTML = v_bodyHtml;
122    /*清除滚动条*/
123    if(this._tipScroll)
124    {   
125       this._tipScroll.clearAll();
126    }
127    /*设置高度*/
128    if(GLOBAL.TOOL.isEmpty(v_headHtml))
129    {
130      this._tipHead.style.height = "0px";
131    } else
132    {
133      this._tipHead.style.height = "20px";
134    }
135 };
136 
137 GLOBAL.Component.ToolTip.prototype.scaleHeight = function()
138 {   
139    var headHeight = this._tipHead.clientHeight;
140    var boxHeight =this._tipBox.clientHeight;
141    if(boxHeight === 0)
142    {
143      boxHeight = 100;
144      this._tipBox.style.height = boxHeight+"px";
145    }
146    if(headHeight === 0)
147    {
148       //不显示_tipHead
149       this._tipBody.style.height = boxHeight+"px";
150       this._tipBody.style.top = "0px";
151    }else{
152       this._tipBody.style.height = (boxHeight - headHeight)+"px";
153       this._tipBody.style.top = headHeight+"px";
154    }
155     /*添加滚动条*/
156    this._tipScroll = new GLOBAL.Component.TinyVScrollBar(this._tipBodyContentID);
157 };
158 
159 /*清理事件*/
160 GLOBAL.Component.ToolTip.prototype._clearEvent = function () {
161     if (this._EventMap != null) {
162         var key, comArray, tmp;
163         for (key in this._EventMap) {
164             comArray = key.split(‘$‘);
165             if (this._EventMap[key] == null)
166                 continue;
167             if (comArray.length >= 2) {
168                 tmp = comArray[0];
169                 if (tmp.indexOf(‘_‘) >= 0) {
170                     eval(‘GLOBAL.Event.remove(this.‘ + GLOBAL.TOOL.trim(comArray[0]) + ‘,"‘ + GLOBAL.TOOL.trim(comArray[1]) + ‘",this._EventMap["‘ + key + ‘"]);‘);
171                 } else {
172                     eval(‘GLOBAL.Event.remove(‘ + GLOBAL.TOOL.trim(comArray[0]) + ‘,"‘ + GLOBAL.TOOL.trim(comArray[1]) + ‘",this._EventMap["‘ + key + ‘"]);‘);
173                 }
174             }
175         }
176     }
177 };
178 
179 /* 设置显示方式 paramters{
180 isEventClear,isTimer,timerMilliseconds,placeW,placeB,isShowClose,isAuto}
181 */
182 GLOBAL.Component.ToolTip.prototype.setShowType=function(paramters) {
183    if(typeof(paramters) =="undefined"||paramters == null)
184    {
185      return ;
186    }
187    if(typeof(paramters.isAuto)!="undefined")
188    {
189       this._isAuto = paramters.isAuto ||this._isAuto;
190    }
191    if(typeof(paramters.isEventClear)!="undefined")
192    {
193       this._isEventClear = paramters.isEventClear ||this._isEventClear;
194    }
195    if(typeof(paramters.isTimer)!="undefined")
196    {
197    this._isTimer = paramters.isTimer ||this._isTimer;
198    }
199    if(typeof(paramters.timerMilliseconds)!="undefined")
200    {
201    this._timerMilliseconds = paramters.timerMilliseconds || this._timerMilliseconds;
202    }
203    if(typeof(paramters.placeW)!="undefined")
204    {
205    this._placeW = paramters.placeW ||this._placeW;
206    }
207    if(typeof(paramters.placeB)!="undefined")
208    {
209    this._placeB = paramters.placeB ||this._placeB;
210    }
211    if(typeof(paramters.isShowClose)!="undefined")
212    {
213    this._isShowClose = paramters.isShowClose ||this._isShowClose;
214    if(this._isShowClose ===1)
215    {
216      GLOBAL.Dom.setStyle(this._tipClose,{‘display‘:‘block‘});
217    }else
218    {
219      GLOBAL.Dom.setStyle(this._tipClose,{‘display‘:‘none‘});
220    }
221    }
222 };
223 
224 /*显示窗口*/
225 GLOBAL.Component.ToolTip.prototype._showWindow = function () {
226     if (this._isClear === 0) {
227         /*未被移除*/
228         if(this._isHide === 1)
229         {
230            GLOBAL.Dom.setStyle(this._tipBox,{‘visibility‘:‘visible‘});
231            this._isHide = 0;
232         }
233     }
234 };
235 /*隐藏窗口*/
236 GLOBAL.Component.ToolTip.prototype._hideWindow = function () {
237     if (this._isClear === 0) {
238         /*未被移除*/
239         if(this._isHide === 0)
240         {
241            GLOBAL.Dom.setStyle(this._tipBox,{‘visibility‘:‘hidden‘});
242            this._isHide = 1;
243         }
244     }
245 };
246 /*显示窗口*/
247 GLOBAL.Component.ToolTip.prototype.show = function () {
248         if(this._isHide === 0)
249         {
250            this._hideWindow();
251         }else
252         {
253            this._showWindow();
254         }
255 };
256 
257 /*清理所有资源 调用后控件则作废*/
258 GLOBAL.Component.ToolTip.prototype.clearAll = function () {
259     if(this._isClear === 1)
260        return ;
261     if(this._timerID)
262     {
263      GLOBAL.Timer.clearTimeout(this._timerID);
264     }
265     this._clearEvent();
266     if(this._tipBox)
267     {
268        this._tipBox.parentNode.removeChild(this._tipBox);
269     }
270     this._isClear = 1;
271 };
272 
273 /*绑定事件*/
274 GLOBAL.Component.ToolTip.prototype.bindEvent=function() {
275   this._clearEvent();
276   if(this._isEventClear === 1)
277   {
278     /*关闭按钮事件*/
279     this._EventMap._tipClose$click = GLOBAL.Event.on(this._tipClose,"click",this.clearAll,this);
280   }else
281   {
282       /*关闭按钮事件*/
283     this._EventMap._tipClose$click = GLOBAL.Event.on(this._tipClose,"click",this._hideWindow,this);
284   }
285   /*主体事件*/
286   this._EventMap._tipNode$mouseover = GLOBAL.Event.on(this._tipNode, ‘mouseover‘, this.mouseoverEventHandler, this);
287 };
288 
289 /*主体事件*/
290 GLOBAL.Component.ToolTip.prototype.mouseoverEventHandler=function(e) {
291     /*如果isAuto==1 则使用鼠标移动事件*/
292     var mousePosition = GLOBAL.Event.getMouseEventDocumentPostion(e);
293     var nodePosition = GLOBAL.TOOL.getPosition(this._tipNode);
294     var nodeSize = GLOBAL.TOOL.getNodeClientSize(this._tipNode);
295     var tipSize =  GLOBAL.TOOL.getNodeClientSize(this._tipBox);
296     if(this._isAuto == 1)
297     {
298        /*计算显示位置*/
299        /*上边比右边*/
300        var scaleMax = 0;
301        scaleMax = (mousePosition.x-nodePosition.x);
302        if(scaleMax<=(mousePosition.y-nodePosition.y))
303        {    
304           this._placeW = GLOBAL.Component.EnumType.PlaceWLeft;
305        }else
306        {
307            scaleMax = (mousePosition.y-nodePosition.y);
308            this._placeW = GLOBAL.Component.EnumType.PlaceWTop;
309        }
310        if(scaleMax >=(nodePosition.x+nodeSize.x-mousePosition.x))
311        {
312            scaleMax = (nodePosition.x+nodeSize.x-mousePosition.x);
313            this._placeW = GLOBAL.Component.EnumType.PlaceWRight;
314        }
315        if(scaleMax >=(nodePosition.y+nodeSize.h-mousePosition.y))
316        {
317            scaleMax = (nodePosition.y+nodeSize.h-mousePosition.y);
318            this._placeW = GLOBAL.Component.EnumType.PlaceWButton;
319        }
320       /*计算显示的中间位置*/
321        if(this._placeW == GLOBAL.Component.EnumType.PlaceWTop ||this._placeW == GLOBAL.Component.EnumType.PlaceWButton )
322        {
323          /*以x轴做计算*/
324          scaleMax = nodeSize.w/4;
325          if(mousePosition.x<=(nodePosition.x+scaleMax))
326          {
327            this._placeB = GLOBAL.Component.EnumType.PlaceBT;
328          }else if(mousePosition.x>=(nodePosition.x+scaleMax*3))
329          {
330            this._placeB = GLOBAL.Component.EnumType.PlaceBB;
331          }else
332          {
333             this._placeB = GLOBAL.Component.EnumType.PlaceBC;
334          }
335        }else
336        {
337          scaleMax = nodeSize.h/4;
338          if(mousePosition.y<=(nodePosition.y+scaleMax))
339          {
340            this._placeB = GLOBAL.Component.EnumType.PlaceBT;
341          }else if(mousePosition.y>=(nodePosition.y+scaleMax*3))
342          {
343            this._placeB = GLOBAL.Component.EnumType.PlaceBB;
344          }else
345          {
346             this._placeB = GLOBAL.Component.EnumType.PlaceBC;
347          }
348        }       
349     }
350     /*计算x和y*/
351     var topX,topY;
352     var offset = 10;
353     if(this._placeW === GLOBAL.Component.EnumType.PlaceWTop)
354     {  
355        /*位于顶边 只需设置一次topY*/
356        topY = nodePosition.y-tipSize.h -offset;
357        if(this._placeB === GLOBAL.Component.EnumType.PlaceBT)
358        {  
359           /*位于头*/
360           topX = nodePosition.x-tipSize.w/2;  
361        }else if(this._placeB === GLOBAL.Component.EnumType.PlaceBC){
362           /*位于中*/
363           topX = nodePosition.x+nodeSize.w/2-tipSize.w/2;
364        }else{
365           /*位于尾*/
366           topX = nodePosition.x+nodeSize.w-tipSize.w/2;
367        }
368     }else if(this._placeW === GLOBAL.Component.EnumType.PlaceWLeft)
369     {  
370        /*位于左边 只需设置一次topX*/
371        topX = nodePosition.x - tipSize.w -offset;
372         if(this._placeB === GLOBAL.Component.EnumType.PlaceBT)
373        {  
374           /*位于头*/
375           topY = nodePosition.y - tipSize.h/2;
376        }else if(this._placeB === GLOBAL.Component.EnumType.PlaceBC){
377           /*位于中*/
378            topY = nodePosition.y +nodeSize.h/2- tipSize.h/2;
379        }else{
380           /*位于尾*/
381           topY = nodePosition.y +nodeSize.h- tipSize.h/2;
382        }
383     }else if(this._placeW === GLOBAL.Component.EnumType.PlaceWRight)
384     {
385        /*位于右边  只需设置一次topX*/
386        topX = nodePosition.x + nodeSize.w +offset;
387         if(this._placeB === GLOBAL.Component.EnumType.PlaceBT)
388        {  
389           /*位于头*/
390           topY = nodePosition.y - tipSize.h/2;
391        }else if(this._placeB === GLOBAL.Component.EnumType.PlaceBC){
392           /*位于中*/
393           topY = nodePosition.y +nodeSize.h/2- tipSize.h/2;
394        }else{
395           /*位于尾*/
396           topY = nodePosition.y +nodeSize.h- tipSize.h/2;
397        }
398     }
399     else 
400     {
401        /*位于底边 只需设置一次topY*/
402        topY = nodePosition.y +nodeSize.h+offset;
403         if(this._placeB === GLOBAL.Component.EnumType.PlaceBT)
404        {  
405           /*位于头*/
406            topX = nodePosition.x-tipSize.w/2;  
407        }else if(this._placeB === GLOBAL.Component.EnumType.PlaceBC){
408           /*位于中*/
409           topX = nodePosition.x+nodeSize.w/2-tipSize.w/2;
410        }else{
411           /*位于尾*/
412            topX = nodePosition.x+nodeSize.w-tipSize.w/2;
413        }
414     }
415     this._tipBox.style.left = topX+"px";
416     this._tipBox.style.top = topY+"px";
417     /*显示窗口*/
418     this._showWindow();
419     if(this._isEventClear === 1)
420   {
421     /*定时器事件*/
422     if(this._isTimer ==1)
423     {
424      this._timerID = GLOBAL.Timer.setTimeout(this.clearAll,null,this._timerMilliseconds,this);
425     }
426   }else
427   {
428     /*定时器事件*/
429     if(this._isTimer==1)
430     {
431      this._timerID = GLOBAL.Timer.setTimeout(this._hideWindow,null,this._timerMilliseconds,this);
432     }
433   }
434     GLOBAL.Event.stopPropagation(e);
435 };