|
0
|
1 ==========================================
|
|
|
2 VERTICAL TAB CONTROL
|
|
|
3 ==========================================
|
|
|
4
|
|
|
5 <macro name="vertical_tab_control" dot_parameter="vertical_tabs">
|
|
|
6 <n.put_in_head.>
|
|
|
7 <style type="text/css">
|
|
|
8 table.vertical-control {
|
|
|
9 margin: 1em 0;
|
|
|
10 width:100%;
|
|
|
11 border-collapse:collapse;
|
|
|
12 }
|
|
|
13 table.vertical-control td {
|
|
|
14 padding:0;
|
|
|
15 vertical-align:top;
|
|
|
16 }
|
|
|
17 table.vertical-control td.details {
|
|
|
18 width:90%;
|
|
|
19 padding:.5em 1em;
|
|
|
20 }
|
|
|
21 ul.vertical-control {
|
|
|
22 width:100%;
|
|
|
23 list-style-type:none;
|
|
|
24 padding:0;
|
|
|
25 margin:0;
|
|
|
26 }
|
|
|
27 ul.vertical-control li {
|
|
|
28 padding: .3em;
|
|
|
29 white-space:nowrap;
|
|
|
30 }
|
|
|
31 ul.vertical-control li.selected {
|
|
|
32 border-top-left-radius:5px;
|
|
|
33 border-bottom-left-radius:5px;
|
|
|
34 -moz-border-radius-topleft:5px;
|
|
|
35 -moz-border-radius-bottomleft:5px;
|
|
|
36 }
|
|
|
37 </style>
|
|
|
38 </n.put_in_head.>
|
|
|
39 <table class="vertical-control">
|
|
|
40 <tr>
|
|
|
41 <td>
|
|
|
42 <ul class="vertical-control">
|
|
|
43 <n.vertical_tab.>
|
|
|
44 <n.vertical_tabs/>
|
|
|
45 </n.vertical_tab.>
|
|
|
46 </ul>
|
|
|
47 </td>
|
|
|
48 <td class="details shaded-bg-color">
|
|
|
49 <n.vertical_tabs/>
|
|
|
50 </td>
|
|
|
51 </tr>
|
|
|
52 </table>
|
|
|
53 </macro>
|
|
|
54
|
|
|
55 <macro name="vertical_tab" dot_parameter="do">
|
|
|
56 <n.do/>
|
|
|
57 </macro>
|
|
|
58
|
|
|
59 <macro name="is_vertical_tab">
|
|
|
60 <n.is_in_command name="vertical_tab" />
|
|
|
61 </macro>
|
|
|
62
|
|
|
63 <macro name="add_vertical_tab" dot_parameter="text" parameters="url,selected,details,icon,style">
|
|
|
64 <n.if.is_vertical_tab>
|
|
|
65 <then>
|
|
|
66 <n.if.selected>
|
|
|
67 <then><li class="selected shaded-bg-color" style="[n.style/]"><n.hide_null.icon/> <n.truncate. size="25"><n.text/></n.truncate.></li></then>
|
|
|
68 <else><li style="[n.style/]"><n.hide_null.icon/> <a href="[n.url/]"><n.truncate. size="25"><n.text/></n.truncate.></a></li></else>
|
|
|
69 </n.if.selected>
|
|
|
70 </then>
|
|
|
71 <else>
|
|
|
72 <n.if.selected>
|
|
|
73 <then.details/>
|
|
|
74 </n.if.selected>
|
|
|
75 </else>
|
|
|
76 </n.if.is_vertical_tab>
|
|
|
77 </macro>
|
|
|
78
|
|
|
79 ==========================================
|
|
|
80 HORIZONTAL TAB CONTROL
|
|
|
81 ==========================================
|
|
|
82
|
|
|
83 <macro name="horizontal_tab_control" dot_parameter="horizontal_tabs" parameters="is_live">
|
|
|
84 <n.put_in_head.>
|
|
|
85 <script src="[n.tabs_library_path/]" type="text/javascript"></script>
|
|
|
86 <style type="text/css">
|
|
|
87 div.tab-contents {
|
|
|
88 margin-top:1.5em;
|
|
|
89 }
|
|
|
90 </style>
|
|
|
91 </n.put_in_head.>
|
|
|
92 <script type="text/javascript">
|
|
|
93 NabbleTabs.startTabControl(<n.hide_null.is_live/>);
|
|
|
94 <n.horizontal_tab.><n.horizontal_tabs/></n.horizontal_tab.>
|
|
|
95 NabbleTabs.endTabControl();
|
|
|
96 </script>
|
|
|
97 <n.if.is_null.is_live>
|
|
|
98 <then>
|
|
|
99 <div class="tab-contents">
|
|
|
100 <n.horizontal_tabs/>
|
|
|
101 </div>
|
|
|
102 </then>
|
|
|
103 </n.if.is_null.is_live>
|
|
|
104 </macro>
|
|
|
105
|
|
|
106 <macro name="horizontal_tab" dot_parameter="do">
|
|
|
107 <n.do/>
|
|
|
108 </macro>
|
|
|
109
|
|
|
110 <macro name="is_horizontal_tab">
|
|
|
111 <n.is_in_command name="horizontal_tab" />
|
|
|
112 </macro>
|
|
|
113
|
|
|
114 <macro name="add_horizontal_tab" parameters="url,text,selected,details">
|
|
|
115 <n.if.is_horizontal_tab>
|
|
|
116 <then>
|
|
|
117 NabbleTabs.addTab('<n.url/>', '<n.javascript_string_encode.text/>', <n.selected/>);
|
|
|
118 </then>
|
|
|
119 <else>
|
|
|
120 <n.if.selected>
|
|
|
121 <then.details/>
|
|
|
122 </n.if.selected>
|
|
|
123 </else>
|
|
|
124 </n.if.is_horizontal_tab>
|
|
|
125 </macro>
|
|
|
126
|
|
|
127 <macro name="add_live_horizontal_tab" parameters="element_id,text,selected,details,onclick">
|
|
|
128 <n.if.is_horizontal_tab>
|
|
|
129 <then>
|
|
|
130 <n.if.is_null.onclick>
|
|
|
131 <then>NabbleTabs.addLiveTab('<n.element_id/>', '<n.javascript_string_encode.text/>', <n.selected/>);</then>
|
|
|
132 <else>NabbleTabs.addLiveTab('<n.element_id/>', '<n.javascript_string_encode.text/>', <n.selected/>, <n.onclick/>);</else>
|
|
|
133 </n.if.is_null.onclick>
|
|
|
134 </then>
|
|
|
135 <else.details/>
|
|
|
136 </n.if.is_horizontal_tab>
|
|
|
137 </macro>
|
|
|
138
|
|
|
139 ==========================================
|
|
|
140 SLIDER
|
|
|
141 ==========================================
|
|
|
142
|
|
|
143 <macro name="slider" dot_parameter="contents" requires="html">
|
|
|
144 <n.put_in_head.>
|
|
|
145 <script src="/util/nabblegallery-1.2.js"></script>
|
|
|
146 </n.put_in_head.>
|
|
|
147 <n.slider_counter.increment/>
|
|
|
148 <div id="slider[n.slider_id/]" style="width:100%">
|
|
|
149 <table id="gallery-view[n.slider_id/]">
|
|
|
150 <tr>
|
|
|
151 <td style="width:20px">
|
|
|
152 <img id="prev[n.slider_id/]" src="/images/left.png" style="cursor:pointer;display:none"/>
|
|
|
153 </td>
|
|
|
154 <td>
|
|
|
155 <div id="gallery[n.slider_id/]" style="width:500px;overflow-x:hidden;position:relative">
|
|
|
156 <table id="images[n.slider_id/]" style="border-collapse:collapse;margin-top:.7em;">
|
|
|
157 <tr style="vertical-align:top">
|
|
|
158 <n.contents/>
|
|
|
159 </tr>
|
|
|
160 </table>
|
|
|
161 </div>
|
|
|
162 </td>
|
|
|
163 <td style="width:20px">
|
|
|
164 <img id="next[n.slider_id/]" src="/images/right.png" style="cursor:pointer"/>
|
|
|
165 </td>
|
|
|
166 </tr>
|
|
|
167 </table>
|
|
|
168 </div>
|
|
|
169 <script type="text/javascript">
|
|
|
170 function update<n.slider_id/>() {
|
|
|
171 fixGalleryWidth(<n.slider_id/>);
|
|
|
172 };
|
|
|
173 galleryReady(<n.slider_id/>);
|
|
|
174 $(window).load(update<n.slider_id/>).resize(update<n.slider_id/>);
|
|
|
175 </script>
|
|
|
176 </macro>
|
|
|
177
|
|
|
178 <macro name="slider_id">
|
|
|
179 <n.slider_counter.value/>
|
|
|
180 </macro>
|
|
|
181
|
|
|
182 <macro name="slider_counter" dot_parameter="do">
|
|
|
183 <n.counter name="slider" do="[n.do/]" />
|
|
|
184 </macro>
|
|
|
185
|
|
|
186 ==========================================
|
|
|
187 TOOLTIP
|
|
|
188 ==========================================
|
|
|
189
|
|
|
190 <macro name="tooltip" dot_parameter="contents" parameters="use_title, delay, position">
|
|
|
191 <n.if.not.is_ajax>
|
|
|
192 <then.put_in_head.compress.tooltip_head/>
|
|
|
193 </n.if.not.is_ajax>
|
|
|
194 <n.set_var. name='tag_id'>tooltip<n.random max="99999"/></n.set_var.>
|
|
|
195 <div id="[n.var name='tag_id'/]" class="nabble-tooltip" use_title="[n.null_to_false.use_title/]">
|
|
|
196 <n.hide_null.contents/>
|
|
|
197 <div class="nabble-tooltip-arrow">
|
|
|
198 <div class="d1">♦</div>
|
|
|
199 <div class="d2">♦</div>
|
|
|
200 </div>
|
|
|
201 </div>
|
|
|
202 <script type="text/javascript">
|
|
|
203 Nabble.startTooltip(Nabble.get('<n.var name='tag_id'/>'), '<n.default to="up" text="[n.position/]"/>', <n.default to="400" text="[n.delay/]"/>);
|
|
|
204 </script>
|
|
|
205 </macro>
|
|
|
206
|
|
|
207 <macro name="tooltip_head">
|
|
|
208 <n.tooltip_css/>
|
|
|
209 <n.tooltip_js/>
|
|
|
210 </macro>
|
|
|
211
|
|
|
212 <macro name="tooltip_small_row" dot_parameter="contents">
|
|
|
213 <div class="nabble-tooltip-small-row second-font">
|
|
|
214 <n.contents/>
|
|
|
215 </div>
|
|
|
216 </macro>
|
|
|
217
|
|
|
218 <macro name="tooltip_css">
|
|
|
219 <style type="text/css">
|
|
|
220 div.nabble-tooltip,
|
|
|
221 div.nabble-tooltip * {
|
|
|
222 color: #EEE;
|
|
|
223 font-weight:bold;
|
|
|
224 }
|
|
|
225 div.nabble-tooltip {
|
|
|
226 background: #000;
|
|
|
227 font-size:90%;
|
|
|
228 line-height:normal;
|
|
|
229 display: none;
|
|
|
230 position: absolute;
|
|
|
231 z-index: 88888;
|
|
|
232 padding: .5em;
|
|
|
233 border: 1px solid #FFF;
|
|
|
234 white-space:normal;
|
|
|
235 -moz-border-radius: 3px;
|
|
|
236 -webkit-border-radius: 3px;
|
|
|
237 border-radius: 3px;
|
|
|
238 }
|
|
|
239 div.nabble-tooltip-small-row,
|
|
|
240 div.nabble-tooltip-small-row * {
|
|
|
241 color:#D0EAF2;
|
|
|
242 }
|
|
|
243 div.nabble-tooltip-small-row {
|
|
|
244 font-size:80%;
|
|
|
245 font-weight:normal;
|
|
|
246 padding-top: .4em;
|
|
|
247 }
|
|
|
248 div.nabble-tooltip-arrow {
|
|
|
249 font: 40px Arial, Sans-serif;
|
|
|
250 line-height:1em;
|
|
|
251 left:15px;
|
|
|
252 position:absolute;
|
|
|
253 bottom:-15px;
|
|
|
254 height:15px;
|
|
|
255 width:30px;
|
|
|
256 overflow:hidden;
|
|
|
257 }
|
|
|
258 div.nabble-tooltip-arrow div {
|
|
|
259 position:absolute;
|
|
|
260 }
|
|
|
261 div.nabble-tooltip-arrow div.d1 {
|
|
|
262 top:-22px;
|
|
|
263 color: #FFF;
|
|
|
264 }
|
|
|
265 div.nabble-tooltip-arrow div.d2 {
|
|
|
266 top:-25px;
|
|
|
267 color: #000;
|
|
|
268 }
|
|
|
269 </style>
|
|
|
270 </macro>
|
|
|
271
|
|
|
272 <macro name="tooltip_js">
|
|
|
273 <script type="text/javascript">
|
|
|
274 <![CDATA[
|
|
|
275 Nabble.startTooltip = function(e, position, delay) {
|
|
|
276 if (e.nabbletooltip)
|
|
|
277 return;
|
|
|
278 e.nabbletooltip = true;
|
|
|
279 var $this = $(e);
|
|
|
280 var $arrow = $this.children().last();
|
|
|
281 var $elem = $this.prev();
|
|
|
282 $elem.hover(
|
|
|
283 function() {
|
|
|
284 setTip();
|
|
|
285 setTimer();
|
|
|
286 },
|
|
|
287 function() {
|
|
|
288 stopTimer();
|
|
|
289 $this.hide();
|
|
|
290 }
|
|
|
291 );
|
|
|
292 function setTimer() {
|
|
|
293 $this.showTipTimer = setTimeout(function() {
|
|
|
294 $('div.nabble-tooltip').hide();
|
|
|
295 stopTimer();
|
|
|
296 $this.fadeTo('fast', .8);
|
|
|
297 }, delay);
|
|
|
298 };
|
|
|
299 function stopTimer() {
|
|
|
300 clearInterval($this.showTipTimer);
|
|
|
301 };
|
|
|
302 function setTip(){
|
|
|
303 if ($this.parent().get() != document.body)
|
|
|
304 $(document.body).append($this);
|
|
|
305 var useTitle = $this.attr('use_title') == 'true';
|
|
|
306 if (useTitle) {
|
|
|
307 var title = $elem.attr('title');
|
|
|
308 if (title != '') {
|
|
|
309 $arrow.remove();
|
|
|
310 $this.html(title);
|
|
|
311 $elem.attr('title','');
|
|
|
312 $this.append($arrow);
|
|
|
313 }
|
|
|
314 }
|
|
|
315 var win = $(window).width();
|
|
|
316 if (position == 'up') {
|
|
|
317 var w = $this.outerWidth();
|
|
|
318 if (w > 250) {
|
|
|
319 w = 250;
|
|
|
320 $this.width(w);
|
|
|
321 }
|
|
|
322 var xMid = $elem.offset().left + $elem.outerWidth()/2;
|
|
|
323 var xTip = xMid - w/2;
|
|
|
324 if (xTip+w > win-5)
|
|
|
325 xTip = win-w-5;
|
|
|
326 if (xTip < 0)
|
|
|
327 xTip = 0;
|
|
|
328 var xArrow = xMid-xTip-11;
|
|
|
329 var yTip = $elem.offset().top-$this.outerHeight()-12;
|
|
|
330 $arrow.css('left', xArrow);
|
|
|
331 $this.css({'top' : yTip, 'left' : xTip});
|
|
|
332 } else if (position == 'right') {
|
|
|
333 var h = $this.outerHeight();
|
|
|
334 var yMid = $elem.offset().top + $elem.outerHeight()/2;
|
|
|
335 var yTip = yMid - h/2;
|
|
|
336 var xTip = $elem.offset().left + $elem.outerWidth() + 10;
|
|
|
337 $arrow.width(8).height(24).css({bottom:0,left:-8});
|
|
|
338 var yArrow = (h - 24)/2;
|
|
|
339 $arrow.css({top:yArrow});
|
|
|
340 var $d1 = $arrow.children().first();
|
|
|
341 var $d2 = $arrow.children().last();
|
|
|
342 $d1.css({top:-11});
|
|
|
343 $d2.css({top:-11,left:1});
|
|
|
344 $this.css({'top' : yTip, 'left' : xTip});
|
|
|
345 }
|
|
|
346 };
|
|
|
347 };
|
|
|
348 ]]>
|
|
|
349 </script>
|
|
|
350 </macro>
|
|
|
351
|
|
|
352 ==========================================
|
|
|
353 CUSTOM DROPDOWN
|
|
|
354 ==========================================
|
|
|
355
|
|
|
356 <macro name="custom_dropdown" parameters="clickable_id, panel_id">
|
|
|
357 <n.put_in_head.>
|
|
|
358 <script type="text/javascript">
|
|
|
359 <![CDATA[
|
|
|
360 var ddPanels = [];
|
|
|
361 Nabble.asDropdown = function(clickableId, panelId) {
|
|
|
362 ddPanels.push(panelId);
|
|
|
363 $(document).ready(function() {
|
|
|
364 var $clickable = $('#'+clickableId);
|
|
|
365 var $panel = $('#'+panelId);
|
|
|
366 $panel.css({
|
|
|
367 position:'absolute',
|
|
|
368 zIndex: 5555,
|
|
|
369 display:'none'
|
|
|
370 });
|
|
|
371 $clickable.addClass('custom-dropdown');
|
|
|
372 $clickable.click(function(e) {
|
|
|
373 e.stopPropagation();
|
|
|
374 var isVisible = $panel.css('display') != 'none';
|
|
|
375 closeDropdowns();
|
|
|
376 if (!isVisible) {
|
|
|
377 var left = $(this).position().left - 5;
|
|
|
378 var w = $panel.outerWidth();
|
|
|
379 var win = $(window).width() - 10;
|
|
|
380 if (left+w > win)
|
|
|
381 left = win - w -10;
|
|
|
382 left = left < 0? 0 : left;
|
|
|
383 $panel.css('left', left);
|
|
|
384 $panel.show();
|
|
|
385 }
|
|
|
386 });
|
|
|
387 $(document).click(function(e) {
|
|
|
388 if ($(e.target).hasClass('custom-dropdown'))
|
|
|
389 return;
|
|
|
390 closeDropdowns();
|
|
|
391 });
|
|
|
392 function closeDropdowns() {
|
|
|
393 for (var i=0;i<ddPanels.length;i++)
|
|
|
394 $('#'+ddPanels[i]).hide();
|
|
|
395 };
|
|
|
396 });
|
|
|
397 };
|
|
|
398 ]]>
|
|
|
399 </script>
|
|
|
400 </n.put_in_head.>
|
|
|
401 <script type="text/javascript">
|
|
|
402 Nabble.asDropdown('<n.clickable_id/>', '<n.panel_id/>');
|
|
|
403 </script>
|
|
|
404 </macro> |
