Verzeichnisstruktur phpBB-3.1.0
- Veröffentlicht
- 27.10.2014
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 var links, i, hold;
020
021 head_text = headline;
022
023 if (!document.getElementById || !document.getElementsByTagName) {
024 return;
025 }
026
027 hold = document.createElement('span');
028 hold.id = '_tooltip_container';
029 hold.setAttribute('id', '_tooltip_container');
030 hold.style.position = 'absolute';
031
032 document.getElementsByTagName('body')[0].appendChild(hold);
033
034 if (id === null) {
035 links = document.getElementsByTagName('a');
036 } else {
037 links = document.getElementById(id).getElementsByTagName('a');
038 }
039
040 for (i = 0; i < links.length; i++) {
041 if (sub_id) {
042 if (links[i].id.substr(0, sub_id.length) === sub_id) {
043 prepare(links[i]);
044 }
045 } else {
046 prepare(links[i]);
047 }
048 }
049
050 tooltip_mode = 'link';
051 }
052
053 /**
054 * Enable tooltip replacements for selects
055 */
056 function enable_tooltips_select(id, headline, sub_id) {
057 var links, i, hold;
058
059 head_text = headline;
060
061 if (!document.getElementById || !document.getElementsByTagName) {
062 return;
063 }
064
065 hold = document.createElement('span');
066 hold.id = '_tooltip_container';
067 hold.setAttribute('id', '_tooltip_container');
068 hold.style.position = 'absolute';
069
070 document.getElementsByTagName('body')[0].appendChild(hold);
071
072 if (id === null) {
073 links = document.getElementsByTagName('option');
074 } else {
075 links = document.getElementById(id).getElementsByTagName('option');
076 }
077
078 for (i = 0; i < links.length; i++) {
079 if (sub_id) {
080 if (links[i].parentNode.id.substr(0, sub_id.length) === sub_id) {
081 prepare(links[i]);
082 }
083 } else {
084 prepare(links[i]);
085 }
086 }
087
088 tooltip_mode = 'select';
089 }
090
091 /**
092 * Prepare elements to replace
093 */
094 function prepare(element) {
095 var tooltip, text, desc, title;
096
097 text = element.getAttribute('title');
098
099 if (text === null || text.length === 0) {
100 return;
101 }
102
103 element.removeAttribute('title');
104 tooltip = create_element('span', 'tooltip');
105
106 title = create_element('span', 'top');
107 title.appendChild(document.createTextNode(head_text));
108 tooltip.appendChild(title);
109
110 desc = create_element('span', 'bottom');
111 desc.innerHTML = text;
112 tooltip.appendChild(desc);
113
114 set_opacity(tooltip);
115
116 element.tooltip = tooltip;
117 element.onmouseover = show_tooltip;
118 element.onmouseout = hide_tooltip;
119
120 if (tooltip_mode === 'link') {
121 element.onmousemove = locate;
122 }
123 }
124
125 /**
126 * Show tooltip
127 */
128 function show_tooltip(e) {
129 document.getElementById('_tooltip_container').appendChild(this.tooltip);
130 locate(this);
131 }
132
133 /**
134 * Hide tooltip
135 */
136 function hide_tooltip(e) {
137 var d = document.getElementById('_tooltip_container');
138 if (d.childNodes.length > 0) {
139 d.removeChild(d.firstChild);
140 }
141 }
142
143 /**
144 * Set opacity on tooltip element
145 */
146 function set_opacity(element) {
147 element.style.filter = 'alpha(opacity:95)';
148 element.style.KHTMLOpacity = '0.95';
149 element.style.MozOpacity = '0.95';
150 element.style.opacity = '0.95';
151 }
152
153 /**
154 * Create new element
155 */
156 function create_element(tag, c) {
157 var x = document.createElement(tag);
158 x.className = c;
159 x.style.display = 'block';
160 return x;
161 }
162
163 /**
164 * Correct positioning of tooltip container
165 */
166 function locate(e) {
167 var posx = 0;
168 var posy = 0;
169
170 e = e.parentNode;
171
172 if (e.offsetParent) {
173 for (posx = 0, posy = 0; e.offsetParent; e = e.offsetParent) {
174 posx += e.offsetLeft;
175 posy += e.offsetTop;
176 }
177 } else {
178 posx = e.offsetLeft;
179 posy = e.offsetTop;
180 }
181
182 if (tooltip_mode === 'link') {
183 document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
184 document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
185 } else {
186 document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
187 document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
188 }
189
190 /*
191 if (e == null)
192 {
193 e = window.event;
194 }
195
196 if (e.pageX || e.pageY)
197 {
198 posx = e.pageX;
199 posy = e.pageY;
200 }
201 else if (e.clientX || e.clientY)
202 {
203 if (document.documentElement.scrollTop)
204 {
205 posx = e.clientX+document.documentElement.scrollLeft;
206 posy = e.clientY+document.documentElement.scrollTop;
207 }
208 else
209 {
210 posx = e.clientX+document.body.scrollLeft;
211 posy = e.clientY+document.body.scrollTop;
212 }
213 }
214 */
215 }
216