[JavaScript]自定义Title的显示方式

 

[JavaScript]自定义Title的显示方式

好久没有写blog了,今天更新下最近在做的事情,顺便让朋友们了解下, 我还顽强地活着 ...


最近刚做完公司的WEB MVP 开发框架.累得脑子快要抽筋了,可是即使要抽筋了,也得继续上啊...谁叫俺是打工仔呢.

现在研究的重点转移到了客户端,于是开始钻研起dojo,prototype,yui......

发现javascript也在OO呢(虽然只是同vb一样基于对象的)~~~呵呵

以前只会找要的js代码,然后改啊改啊...从来没有认真的学习过,这次决定好好学学这个Web开发必不可少的东东...

好了废话不扯了,这次的任务就是做Title的自定义显示.

我想IE的Tip显示方式,肯定大家都不满意吧.每一天有多少人在做着自己的自定义显示.

俺可没有那么多精力,先是从网络上找找到了一个老外的程序 qTip: http://solardreamstudios.com/_img/learn/css/qtip/qTip.html

仔细看了看代码,发现几个问题:
1.这个老外只做了一半,它只对单个Tag的所有元素集合进行自定义显示

1 var  qTipTag  =   " a " ;  // Which tag do you want to qTip-ize? Keep it lowercase!//

2.循环出来每个挂载mouse事件

1 var  anchors  =  document.getElementsByTagName (qTipTag);
2
3      for  ( var  i  =   0 ; i  <  anchors.length; i  ++ )  {
4//.
5}

3.Event采用赋值形式

1     a.onmouseover  =   function ()  {tooltip.show(this.getAttribute('tiptitle'))} ;
2             a.onmouseout  =   function ()  {tooltip.hide()} ;
3

OK.针对这些问题,我们开始我们的重构之旅

1.首先,我希望页面控件的所有Tag只要有Title的,我都要采用自定义显示,这时想到一个最土的招就是

var  anchors  =  document.all;

2.它的实现方式是循环找到所有的有标记的Tag,然后设置mouse事件.
  这一步我觉得有2个问题:
  a.每个tag都设置mouse的事件,显然页面变大了,特别是我现在要求所有的Tag都要自定义显示
  b.Event采用赋值.......寒一个

  我的思路是使用事件的串连机制,把mouse的事件直接挂载到document上面,然后进行冒泡处理(我不知道这样的效率实际上是更好呢,还是更坏,自我感觉应该会好些吧?:))

 

 1 document.attachEvent( " onmouseover " , function (e)
 2          {            
 3            if(typeof(event)=="undefined"){
 4                sTitle = e.target.getAttribute("title")
 5                e.target.removeAttribute("title");
 6            }else{
 7                e    = event;
 8                sTitle = e.srcElement.title;
 9                e.srcElement.title = "";
10            };
11    
12            if(!sTitle == "")
13            {        
14                tooltip.show(sTitle);
15            }
16        }
17     );
18
19     document.attachEvent('onmouseout', function (e)
20          {
21
22            if(typeof(event)=="undefined"){
23                e.target.setAttribute("title",sTitle);
24            }else{
25                e    = event;
26                e.srcElement.title = sTitle;
27            };
28            
29            tooltip.hide();
30        
31        }
32     );
33

当然这里或许会碰到的所谓的IE 内存泄漏,因为没有detachEvent.(本来想使用Event.observer的,不过prototype还不谈熟,加上脑子也晕乎乎了,留待下次重构吧)...

document.attachEvent 

看来好像只支持IE哦....还是对少数的其他Fans支持一下吧,修改一下系统方法,让它适当兼容一下其他浏览器

 1 if ( ! document.attachEvent) // Not IE
 2 {
 3    document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
 4}
 5
 6 if ( ! window.attachEvent) // Not IE
 7 {
 8    window.attachEvent = function(){window.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
 9}
10

这样子,大概qTip的功能就重构结束了...

当然还有很多可以改进的地方,比如把提示用的层设计得漂亮一点...

     if ( ! tipContainer)  {
      tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
        tipContainer.setAttribute("id", tipContainerID);
//美化下?
      document.getElementsByTagName("body").item(0).appendChild(tipContainer);
    }

重构后的源文件(在需要的页面link这2个文件就好了):

qTip.js
  1//偷抄的^_^
  2function $() {
  3  var elements = new Array();
  4
  5  for (var i = 0; i < arguments.length; i++) {
  6    var element = arguments[i];
  7    if (typeof element == 'string')
  8      element = document.getElementById(element);
  9
 10    if (arguments.length == 1)
 11      return element;
 12
 13    elements.push(element);
 14  }
 15
 16  return elements;
 17}
 18
 19//兼容性
 20if(!document.attachEvent)//Not IE
 21{
 22    document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
 23}
 24
 25if(!window.attachEvent)//Not IE
 26{
 27    window.attachEvent = function(){window.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
 28}
 29
 30//位置
 31var qTipX = -30; //This is qTip's X offset//
 32var qTipY = 25; //This is qTip's Y offset//
 33
 34tooltip = {
 35  name : "qTip",
 36  offsetX : qTipX,
 37  offsetY : qTipY,
 38  tip : null
 39}
 40
 41tooltip.init = function () {
 42    var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
 43    if(!tipContainerID){ var tipContainerID = "qTip";}
 44    var tipContainer = document.getElementById(tipContainerID);
 45
 46    if(!tipContainer) {
 47      tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
 48        tipContainer.setAttribute("id", tipContainerID);
 49      document.getElementsByTagName("body").item(0).appendChild(tipContainer);
 50    }
 51
 52    this.tip = $(this.name);
 53    if (this.tip) 
 54    {
 55        document.attachEvent("onmousemove",function (e) {tooltip.move (e)});
 56    }
 57    var sTitle="";
 58    
 59        //串连onmouseover事件
 60    document.attachEvent("onmouseover",function(e)
 61        {            
 62            if(typeof(event)=="undefined"){
 63                sTitle = e.target.getAttribute("title")
 64                e.target.removeAttribute("title");
 65            }else{
 66                e    = event;
 67                sTitle = e.srcElement.title;
 68                e.srcElement.title = "";
 69            };
 70    
 71            if(!sTitle == "")
 72            {        
 73                tooltip.show(sTitle);
 74            }
 75        }
 76    );
 77
 78        //串连onmouseout事件
 79    document.attachEvent('onmouseout',function(e)
 80        {
 81
 82            if(typeof(event)=="undefined"){
 83                e.target.setAttribute("title",sTitle);
 84            }else{
 85                e    = event;
 86                e.srcElement.title = sTitle;
 87            };
 88            
 89            tooltip.hide();
 90        
 91        }
 92    );
 93}
 94
 95//移动事件
 96tooltip.move = function (evt) {
 97//Get mouse X & Y
 98    var x=0, y=0;
 99    if (document.all) {//IE
100        x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
101        y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
102        x += window.event.clientX;
103        y += window.event.clientY;
104        
105    } else {//Good Browsers
106        x = evt.pageX;
107        y = evt.pageY;
108    }
109    this.tip.style.left = (x + this.offsetX) + "px";
110    this.tip.style.top = (y + this.offsetY) + "px";
111}
112
113tooltip.show = function (text) {
114    if (!this.tip) return;
115    this.tip.innerHTML = text;
116    this.tip.style.display = "block";
117}
118
119tooltip.hide = function () {
120    if (!this.tip) return;
121    this.tip.innerHTML = "";
122    this.tip.style.display = "none";
123}
124
125//load的时候初始化自定义显示方式
126window.attachEvent("onload",function(e){tooltip.init();});
127
128
129
130
131
132

 

qTip.css
 1div#qTip {}{
 2  padding: 3px;
 3  border: 1px solid gray;
 4  border-right-width: 2px;
 5  border-bottom-width: 2px;
 6  display: none;
 7  background: #999;
 8  background-color:#ffffff;
 9  color: #349045;
10  font-size:9pt;
11  font: bold 9px Verdana, Arial, Helvetica, sans-serif;
12  text-align: left;
13  position: absolute;
14  z-index: 1000;
15  padding:"5px 8px 3px 8px"; 
16}
17