[JavaScript]自定义Title的显示方式
好久没有写blog了,今天更新下最近在做的事情,顺便让朋友们了解下,
我还顽强地活着
![[JavaScript]自定义Title的显示方式_prototype](http://dev-img.mos.moduyun.com/20231026/f3536bd8-658f-44db-b9fa-df2800d6995e.gif)
...
最近刚做完公司的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的所有元素集合进行自定义显示
![[JavaScript]自定义Title的显示方式_javascript_02](http://dev-img.mos.moduyun.com/20231026/9cf30d97-f2db-42dd-b0a1-e8a56b550f5a.gif)
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个文件就好了):
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()
23}
24
25if(!window.attachEvent)//Not IE
26
29
30//位置
31var qTipX = -30; //This is qTip's X offset//
32var qTipY = 25; //This is qTip's Y offset//
33
34tooltip =
40
41tooltip.init = function ()
94
95//移动事件
96tooltip.move = function (evt)
112
113tooltip.show = function (text)
118
119tooltip.hide = function ()
124
125//load的时候初始化自定义显示方式
126window.attachEvent("onload",function(e){tooltip.init();});
127
128
129
130
131
132