好久没有写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的所有元素集合进行自定义显示
2.循环出来每个挂载mouse事件
3.Event采用赋值形式
OK.针对这些问题,我们开始我们的重构之旅
1.首先,我希望页面控件的所有Tag只要有Title的,我都要采用自定义显示,这时想到一个最土的招就是
var anchors = document.all;
2.它的实现方式是循环找到所有的有标记的Tag,然后设置mouse事件.
这一步我觉得有2个问题:
a.每个tag都设置mouse的事件,显然页面变大了,特别是我现在要求所有的Tag都要自定义显示
b.Event采用赋值.......寒一个
我的思路是使用事件的串连机制,把mouse的事件直接挂载到document上面,然后进行冒泡处理(我不知道这样的效率实际上是更好呢,还是更坏,自我感觉应该会好些吧?:))
当然这里或许会碰到的所谓的IE 内存泄漏,因为没有detachEvent.(本来想使用Event.observer的,不过prototype还不谈熟,加上脑子也晕乎乎了,留待下次重构吧)...
document.attachEvent
看来好像只支持IE哦....还是对少数的其他Fans支持一下吧,修改一下系统方法,让它适当兼容一下其他浏览器
if(!tipContainer)
{
tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
tipContainer.setAttribute("id", tipContainerID);
//美化下?
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}
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
...
最近刚做完公司的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!//
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}
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
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
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
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
//偷抄的^_^2
function $() {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
//兼容性20
if(!document.attachEvent)//Not IE21
{22
document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}23
}24
25
if(!window.attachEvent)//Not IE26
{27
window.attachEvent = function(){window.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}28
}29
30
//位置31
var qTipX = -30; //This is qTip's X offset//32
var qTipY = 25; //This is qTip's Y offset//33
34
tooltip = {35
name : "qTip",36
offsetX : qTipX,37
offsetY : qTipY,38
tip : null39
}40
41
tooltip.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
//移动事件96
tooltip.move = function (evt) {97
//Get mouse X & Y98
var x=0, y=0;99
if (document.all) {//IE100
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 Browsers106
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
113
tooltip.show = function (text) {114
if (!this.tip) return;115
this.tip.innerHTML = text;116
this.tip.style.display = "block";117
}118
119
tooltip.hide = function () {120
if (!this.tip) return;121
this.tip.innerHTML = "";122
this.tip.style.display = "none";123
}124
125
//load的时候初始化自定义显示方式126
window.attachEvent("onload",function(e){tooltip.init();});127
128
129
130
131
132
qTip.css
1
div#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
本文转自浪子博客园博客，原文链接：http://www.cnblogs.com/walkingboy/archive/2006/08/03/ClientScript_qTip.html,如需转载请自行联系原作者
