![05.gif](/Emoticons/QQ/05.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的所有元素集合进行自定义显示
1
var
qTipTag
=
"
a
"
;
//
Which tag do you want to qTip-ize? Keep it lowercase!//
![None.gif](/Images/OutliningIndicators/None.gif)
2.循环出来每个挂载mouse事件
1
var
anchors
=
document.getElementsByTagName (qTipTag);
2![None.gif](/Images/OutliningIndicators/None.gif)
3![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
for
(
var
i
=
0
; i
<
anchors.length; i
++
)
{
4
//
.
5
}
![None.gif](/Images/OutliningIndicators/None.gif)
2
![None.gif](/Images/OutliningIndicators/None.gif)
3
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
4
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![dot.gif](/Images/dot.gif)
5
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
3.Event采用赋值形式
1
a.onmouseover
=
function
()
{tooltip.show(this.getAttribute('tiptitle'))}
;
2![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
a.onmouseout
=
function
()
{tooltip.hide()}
;
3
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
2
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
3
![None.gif](/Images/OutliningIndicators/None.gif)
OK.针对这些问题,我们开始我们的重构之旅
1.首先,我希望页面控件的所有Tag只要有Title的,我都要采用自定义显示,这时想到一个最土的招就是
![None.gif](/Images/OutliningIndicators/None.gif)
2.它的实现方式是循环找到所有的有标记的Tag,然后设置mouse事件.
这一步我觉得有2个问题:
a.每个tag都设置mouse的事件,显然页面变大了,特别是我现在要求所有的Tag都要自定义显示
b.Event采用赋值.......寒一个
我的思路是使用事件的串连机制,把mouse的事件直接挂载到document上面,然后进行冒泡处理(我不知道这样的效率实际上是更好呢,还是更坏,自我感觉应该会好些吧?:))
1
document.attachEvent(
"
onmouseover
"
,
function
(e)
2![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
3![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof(event)=="undefined")
{
4
sTitle = e.target.getAttribute("title")
5
e.target.removeAttribute("title");
6![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
7
e = event;
8
sTitle = e.srcElement.title;
9
e.srcElement.title = "";
10
};
11
12
if(!sTitle == "")
13![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
14
tooltip.show(sTitle);
15
}
16
}
17
);
18![None.gif](/Images/OutliningIndicators/None.gif)
19
document.attachEvent('onmouseout',
function
(e)
20![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
21![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
22![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof(event)=="undefined")
{
23
e.target.setAttribute("title",sTitle);
24![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
25
e = event;
26
e.srcElement.title = sTitle;
27
};
28
29
tooltip.hide();
30
31
}
32
);
33
![None.gif](/Images/OutliningIndicators/None.gif)
2
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
3
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
4
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
5
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
6
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
7
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
8
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
9
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
10
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
11
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
12
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
13
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
14
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
15
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
16
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
17
![None.gif](/Images/OutliningIndicators/None.gif)
18
![None.gif](/Images/OutliningIndicators/None.gif)
19
![None.gif](/Images/OutliningIndicators/None.gif)
20
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
21
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
22
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
23
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
24
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
25
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
26
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
27
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
28
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
29
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
30
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
31
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
32
![None.gif](/Images/OutliningIndicators/None.gif)
33
![None.gif](/Images/OutliningIndicators/None.gif)
当然这里或许会碰到的所谓的IE 内存泄漏,因为没有detachEvent.(本来想使用Event.observer的,不过prototype还不谈熟,加上脑子也晕乎乎了,留待下次重构吧)...
![None.gif](/Images/OutliningIndicators/None.gif)
看来好像只支持IE哦....还是对少数的其他Fans支持一下吧,修改一下系统方法,让它适当兼容一下其他浏览器
1
if
(
!
document.attachEvent)
//
Not IE
2![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
3![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
document.attachEvent = function()
{document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
4
}
5![None.gif](/Images/OutliningIndicators/None.gif)
6
if
(
!
window.attachEvent)
//
Not IE
7![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
8![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.attachEvent = function()
{window.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
9
}
10
![None.gif](/Images/OutliningIndicators/None.gif)
2
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
3
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
4
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
5
![None.gif](/Images/OutliningIndicators/None.gif)
6
![None.gif](/Images/OutliningIndicators/None.gif)
7
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
8
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
9
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
10
![None.gif](/Images/OutliningIndicators/None.gif)
这样子,大概qTip的功能就重构结束了...
当然还有很多可以改进的地方,比如把提示用的层设计得漂亮一点...
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
重构后的源文件(在需要的页面link这2个文件就好了):
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
![None.gif](/Images/OutliningIndicators/None.gif)
2
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
3
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
4
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
5
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
6
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
7
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
8
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
9
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
10
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
11
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
12
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
13
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
14
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
15
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
16
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
17
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
18
![None.gif](/Images/OutliningIndicators/None.gif)
19
![None.gif](/Images/OutliningIndicators/None.gif)
20
![None.gif](/Images/OutliningIndicators/None.gif)
21
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
22
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
23
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
24
![None.gif](/Images/OutliningIndicators/None.gif)
25
![None.gif](/Images/OutliningIndicators/None.gif)
26
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
27
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
28
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
29
![None.gif](/Images/OutliningIndicators/None.gif)
30
![None.gif](/Images/OutliningIndicators/None.gif)
31
![None.gif](/Images/OutliningIndicators/None.gif)
32
![None.gif](/Images/OutliningIndicators/None.gif)
33
![None.gif](/Images/OutliningIndicators/None.gif)
34
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
35
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
36
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
37
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
38
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
39
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
40
![None.gif](/Images/OutliningIndicators/None.gif)
41
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
42
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
43
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
44
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
45
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
46
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
47
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
48
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
49
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
50
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
51
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
52
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
53
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
54
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
55
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
56
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
57
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
58
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
59
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
60
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
61
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
62
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
63
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
64
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
65
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
66
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
67
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
68
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
69
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
70
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
71
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
72
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
73
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
74
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
75
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
76
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
77
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
78
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
79
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
80
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
81
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
82
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
83
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
84
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
85
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
86
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
87
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
88
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
89
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
90
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
91
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
92
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
93
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
94
![None.gif](/Images/OutliningIndicators/None.gif)
95
![None.gif](/Images/OutliningIndicators/None.gif)
96
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
97
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
98
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
99
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
100
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
101
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
102
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
103
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
104
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
105
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
106
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
107
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
108
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
109
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
110
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
111
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
112
![None.gif](/Images/OutliningIndicators/None.gif)
113
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
114
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
115
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
116
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
117
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
118
![None.gif](/Images/OutliningIndicators/None.gif)
119
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
120
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
121
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
122
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
123
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
124
![None.gif](/Images/OutliningIndicators/None.gif)
125
![None.gif](/Images/OutliningIndicators/None.gif)
126
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
127
![None.gif](/Images/OutliningIndicators/None.gif)
128
![None.gif](/Images/OutliningIndicators/None.gif)
129
![None.gif](/Images/OutliningIndicators/None.gif)
130
![None.gif](/Images/OutliningIndicators/None.gif)
131
![None.gif](/Images/OutliningIndicators/None.gif)
132
![None.gif](/Images/OutliningIndicators/None.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
2
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
3
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
4
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
5
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
6
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
7
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
8
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
9
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
10
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
11
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
12
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
13
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
14
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
15
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
16
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
17
![None.gif](/Images/OutliningIndicators/None.gif)