Verzeichnisstruktur phpBB-3.0.0
- Veröffentlicht
- 12.12.2007
So funktioniert es
|
|
Auf das letzte Element klicken. Dies geht jeweils ein Schritt zurück |
Auf das Icon klicken, dies öffnet das Verzeichnis. Nochmal klicken schließt das Verzeichnis. |
|
|
(Beispiel Datei-Icons)
|
Auf das Icon klicken um den Quellcode anzuzeigen |
tooltip.js
001 /*
002 javascript for Bubble Tooltips by Alessandro Fulciniti
003 - http://pro.html.it - http://web-graphics.com
004 obtained from: http://web-graphics.com/mtarchive/001717.php
005
006 phpBB Development Team:
007 - modified to adhere to our coding guidelines
008 - integration into our design
009 - added ability to perform tooltips on select elements
010 - further adjustements
011 */
012
013 var head_text, tooltip_mode;
014
015 /**
016 * Enable tooltip replacements for links
017 */
018 function enable_tooltips_link(id, headline, sub_id)
019 {
020 var links, i, hold;
021
022 head_text = headline;
023
024 if (!document.getElementById || !document.getElementsByTagName)
025 {
026 return;
027 }
028
029 hold = document.createElement('span');
030 hold.id = '_tooltip_container';
031 hold.setAttribute('id', '_tooltip_container');
032 hold.style.position = 'absolute';
033
034 document.getElementsByTagName('body')[0].appendChild(hold);
035
036 if (id == null)
037 {
038 links = document.getElementsByTagName('a');
039 }
040 else
041 {
042 links = document.getElementById(id).getElementsByTagName('a');
043 }
044
045 for (i = 0; i < links.length; i++)
046 {
047 if (sub_id)
048 {
049 if (links[i].id.substr(0, sub_id.length) == sub_id)
050 {
051 prepare(links[i]);
052 }
053 }
054 else
055 {
056 prepare(links[i]);
057 }
058 }
059
060 tooltip_mode = 'link';
061 }
062
063 /**
064 * Enable tooltip replacements for selects
065 */
066 function enable_tooltips_select(id, headline, sub_id)
067 {
068 var links, i, hold;
069
070 head_text = headline;
071
072 if (!document.getElementById || !document.getElementsByTagName)
073 {
074 return;
075 }
076
077 hold = document.createElement('span');
078 hold.id = '_tooltip_container';
079 hold.setAttribute('id', '_tooltip_container');
080 hold.style.position = 'absolute';
081
082 document.getElementsByTagName('body')[0].appendChild(hold);
083
084 if (id == null)
085 {
086 links = document.getElementsByTagName('option');
087 }
088 else
089 {
090 links = document.getElementById(id).getElementsByTagName('option');
091 }
092
093 for (i = 0; i < links.length; i++)
094 {
095 if (sub_id)
096 {
097 if (links[i].parentNode.id.substr(0, sub_id.length) == sub_id)
098 {
099 prepare(links[i]);
100 }
101 }
102 else
103 {
104 prepare(links[i]);
105 }
106 }
107
108 tooltip_mode = 'select';
109 }
110
111 /**
112 * Prepare elements to replace
113 */
114 function prepare(element)
115 {
116 var tooltip, text, desc, title;
117
118 text = element.getAttribute('title');
119
120 if (text == null || text.length == 0)
121 {
122 return;
123 }
124
125 element.removeAttribute('title');
126 tooltip = create_element('span', 'tooltip');
127
128 title = create_element('span', 'top');
129 title.appendChild(document.createTextNode(head_text));
130 tooltip.appendChild(title);
131
132 desc = create_element('span', 'bottom');
133 desc.innerHTML = text;
134 tooltip.appendChild(desc);
135
136 set_opacity(tooltip);
137
138 element.tooltip = tooltip;
139 element.onmouseover = show_tooltip;
140 element.onmouseout = hide_tooltip;
141
142 if (tooltip_mode == 'link')
143 {
144 element.onmousemove = locate;
145 }
146 }
147
148 /**
149 * Show tooltip
150 */
151 function show_tooltip(e)
152 {
153 document.getElementById('_tooltip_container').appendChild(this.tooltip);
154 locate(this);
155 }
156
157 /**
158 * Hide tooltip
159 */
160 function hide_tooltip(e)
161 {
162 var d = document.getElementById('_tooltip_container');
163 if (d.childNodes.length > 0)
164 {
165 d.removeChild(d.firstChild);
166 }
167 }
168
169 /**
170 * Set opacity on tooltip element
171 */
172 function set_opacity(element)
173 {
174 element.style.filter = 'alpha(opacity:95)';
175 element.style.KHTMLOpacity = '0.95';
176 element.style.MozOpacity = '0.95';
177 element.style.opacity = '0.95';
178 }
179
180 /**
181 * Create new element
182 */
183 function create_element(tag, c)
184 {
185 var x = document.createElement(tag);
186 x.className = c;
187 x.style.display = 'block';
188 return x;
189 }
190
191 /**
192 * Correct positioning of tooltip container
193 */
194 function locate(e)
195 {
196 var posx = 0;
197 var posy = 0;
198
199 e = e.parentNode;
200
201 if (e.offsetParent)
202 {
203 for (var posx = 0, posy = 0; e.offsetParent; e = e.offsetParent)
204 {
205 posx += e.offsetLeft;
206 posy += e.offsetTop;
207 }
208 }
209 else
210 {
211 posx = e.offsetLeft;
212 posy = e.offsetTop;
213 }
214
215 if (tooltip_mode == 'link')
216 {
217 document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
218 document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
219 }
220 else
221 {
222 document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
223 document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
224 }
225
226 /*
227 if (e == null)
228 {
229 e = window.event;
230 }
231
232 if (e.pageX || e.pageY)
233 {
234 posx = e.pageX;
235 posy = e.pageY;
236 }
237 else if (e.clientX || e.clientY)
238 {
239 if (document.documentElement.scrollTop)
240 {
241 posx = e.clientX+document.documentElement.scrollLeft;
242 posy = e.clientY+document.documentElement.scrollTop;
243 }
244 else
245 {
246 posx = e.clientX+document.body.scrollLeft;
247 posy = e.clientY+document.body.scrollTop;
248 }
249 }
250 */
251 }
252