|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: Overlay: Stack Support</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
19 |
<style type="text/css"> |
|
|
20 |
/* Overlay Look/Feel */ |
|
|
21 |
.yui-overlay-content { |
|
|
22 |
padding:2px; |
|
|
23 |
border:1px solid #000; |
|
|
24 |
background-color:#aaa; |
|
|
25 |
font-size:93%; |
|
|
26 |
} |
|
|
27 |
|
|
|
28 |
.yui-overlay-content .yui-widget-hd { |
|
|
29 |
font-weight:bold; |
|
|
30 |
text-align:center; |
|
|
31 |
padding:2px; |
|
|
32 |
border:2px solid #aa0000; |
|
|
33 |
background-color:#fff; |
|
|
34 |
} |
|
|
35 |
|
|
|
36 |
.yui-overlay-content .yui-widget-bd { |
|
|
37 |
text-align:left; |
|
|
38 |
padding:2px; |
|
|
39 |
border:2px solid #0000aa; |
|
|
40 |
background-color:#fff; |
|
|
41 |
} |
|
|
42 |
|
|
|
43 |
.yui-overlay-content .yui-widget-hd .yui-ovr-number { |
|
|
44 |
color:#aa0000; |
|
|
45 |
} |
|
|
46 |
|
|
|
47 |
/* Example Layout CSS */ |
|
|
48 |
.overlay-example { |
|
|
49 |
position:relative; |
|
|
50 |
border:1px solid #000; |
|
|
51 |
background-color:#eee; |
|
|
52 |
padding:5px; |
|
|
53 |
height:25em; |
|
|
54 |
} |
|
|
55 |
|
|
|
56 |
.overlay-example select.needs-shim { |
|
|
57 |
width:100%; |
|
|
58 |
} |
|
|
59 |
|
|
|
60 |
.overlay-example .filler { |
|
|
61 |
color:#999; |
|
|
62 |
} |
|
|
63 |
</style> |
|
|
64 |
</head> |
|
|
65 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
66 |
<div id="custom-doc" class="yui-t2"> |
|
|
67 |
<div id="hd"> |
|
|
68 |
<div id="ygunav"> |
|
|
69 |
<p> |
|
|
70 |
<em> |
|
|
71 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
72 |
</em> |
|
|
73 |
</p> |
|
|
74 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
75 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
76 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
77 |
<div id="sitesearch"> |
|
|
78 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
79 |
<input type="text" id="searchinput" name="p"> |
|
|
80 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
81 |
</div> |
|
|
82 |
</form> |
|
|
83 |
</div> |
|
|
84 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
85 |
<div id="pagetitle"><h1>YUI Library Examples: Overlay: Stack Support</h1></div> |
|
|
86 |
</div> |
|
|
87 |
<div id="bd"> |
|
|
88 |
|
|
|
89 |
|
|
|
90 |
<div id="yui-main"> |
|
|
91 |
<div class="yui-b"> |
|
|
92 |
<div class="yui-ge"> |
|
|
93 |
<div class="yui-u first example" id="main"> |
|
|
94 |
|
|
|
95 |
<h2>Overlay: Stack Support</h2> |
|
|
96 |
|
|
|
97 |
<div id="example" class="promo"> |
|
|
98 |
<div class="example-intro"> |
|
|
99 |
<p>This example shows how you can work with the <code>zIndex</code> attribute which the Overlay supports, to implement a simple <code>bringToTop</code> function. The example code also listens for changes in the <code>zIndex</code> attribute, which it uses to update the content of the overlay, when it is brought to the top of the stack.</p> </div> |
|
|
100 |
|
|
|
101 |
<div class="module example-container "> |
|
|
102 |
<div class="hd exampleHd"> |
|
|
103 |
<p class="newWindowButton yui-skin-sam"> |
|
|
104 |
<a href="overlay-stack_clean.html" target="_blank">View example in new window.</a> |
|
|
105 |
</p> |
|
|
106 |
</div> <div id="example-canvas" class="bd"> |
|
|
107 |
|
|
|
108 |
|
|
|
109 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
110 |
|
|
|
111 |
<p>Click on an Overlay, to switch it's zIndex with the highest zIndex in the stack, bringing it to the top of the stack:</p> |
|
|
112 |
<div class="overlay-example" id="overlay-stack"> |
|
|
113 |
<p class="filler"> |
|
|
114 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non urna. Nulla aliquam rhoncus est. |
|
|
115 |
<select class="needs-shim"> |
|
|
116 |
<option>Prevent IE6 Bleedthrough</option> |
|
|
117 |
</select> |
|
|
118 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non urna. Nulla aliquam rhoncus est. |
|
|
119 |
</p> |
|
|
120 |
</div> |
|
|
121 |
|
|
|
122 |
<script type="text/javascript"> |
|
|
123 |
YUI({base:"../../build/", timeout: 10000}).use("overlay", function(Y) { |
|
|
124 |
|
|
|
125 |
var overlays = [], |
|
|
126 |
overlay, |
|
|
127 |
n = 6, |
|
|
128 |
xy = Y.one("#overlay-stack").getXY(); |
|
|
129 |
|
|
|
130 |
function getOverlayXY(xy, i) { |
|
|
131 |
return [xy[0] + i * 60, xy[1] + i * 40]; |
|
|
132 |
} |
|
|
133 |
|
|
|
134 |
for (var i = 0; i < n; ++i) { |
|
|
135 |
|
|
|
136 |
ovrXY = getOverlayXY(xy, i); |
|
|
137 |
ovrZIndex = i+1; |
|
|
138 |
|
|
|
139 |
// Setup n Overlays, with increasing zIndex values |
|
|
140 |
overlay = new Y.Overlay({ |
|
|
141 |
zIndex:ovrZIndex, |
|
|
142 |
xy:ovrXY, |
|
|
143 |
width:"8em", |
|
|
144 |
height:"8em", |
|
|
145 |
headerContent: 'Overlay <span class="yui-ovr-number">' + i + '</span>', |
|
|
146 |
bodyContent: "zIndex = " + ovrZIndex |
|
|
147 |
}); |
|
|
148 |
|
|
|
149 |
overlay.render("#overlay-stack"); |
|
|
150 |
overlays.push(overlay); |
|
|
151 |
|
|
|
152 |
// Update body whenever zIndex changes |
|
|
153 |
overlay.after("zIndexChange", function(e) { |
|
|
154 |
this.set("bodyContent", "zIndex = " + e.newVal); |
|
|
155 |
}); |
|
|
156 |
} |
|
|
157 |
|
|
|
158 |
function onStackMouseDown(e) { |
|
|
159 |
var widget = Y.Widget.getByNode(e.target); |
|
|
160 |
|
|
|
161 |
// If user clicked on an Overlay, bring it to the top of the stack |
|
|
162 |
if (widget && widget instanceof Y.Overlay) { |
|
|
163 |
bringToTop(widget); |
|
|
164 |
} |
|
|
165 |
} |
|
|
166 |
|
|
|
167 |
// zIndex comparator |
|
|
168 |
function byZIndexDesc(a, b) { |
|
|
169 |
if (!a || !b || !a.hasImpl(Y.WidgetStack) || !b.hasImpl(Y.WidgetStack)) { |
|
|
170 |
return 0; |
|
|
171 |
} else { |
|
|
172 |
var aZ = a.get("zIndex"); |
|
|
173 |
var bZ = b.get("zIndex"); |
|
|
174 |
|
|
|
175 |
if (aZ > bZ) { |
|
|
176 |
return -1; |
|
|
177 |
} else if (aZ < bZ) { |
|
|
178 |
return 1; |
|
|
179 |
} else { |
|
|
180 |
return 0; |
|
|
181 |
} |
|
|
182 |
} |
|
|
183 |
} |
|
|
184 |
|
|
|
185 |
function bringToTop(overlay) { |
|
|
186 |
|
|
|
187 |
// Sort overlays by their numerical zIndex values |
|
|
188 |
overlays.sort(byZIndexDesc); |
|
|
189 |
|
|
|
190 |
// Get the highest one |
|
|
191 |
var highest = overlays[0]; |
|
|
192 |
|
|
|
193 |
// If the overlay is not the highest one, switch zIndices |
|
|
194 |
if (highest !== overlay) { |
|
|
195 |
var highestZ = highest.get("zIndex"); |
|
|
196 |
var overlayZ = overlay.get("zIndex"); |
|
|
197 |
|
|
|
198 |
overlay.set("zIndex", highestZ); |
|
|
199 |
highest.set("zIndex", overlayZ); |
|
|
200 |
} |
|
|
201 |
} |
|
|
202 |
|
|
|
203 |
Y.on("mousedown", onStackMouseDown, "#overlay-stack"); |
|
|
204 |
}); |
|
|
205 |
</script> |
|
|
206 |
|
|
|
207 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
208 |
|
|
|
209 |
|
|
|
210 |
</div> |
|
|
211 |
</div> |
|
|
212 |
</div> |
|
|
213 |
|
|
|
214 |
<h3>Basic Overlay Stackability (zIndex and shim support)</h3> |
|
|
215 |
|
|
|
216 |
<h4>Setting Up The YUI Instance</h4> |
|
|
217 |
|
|
|
218 |
<p>As with the <a href="overlay-xy.html">"Basic XY Positioning"</a> example, to create an instance of an Overlay on your page, the only module you need to request is the <code>overlay</code> module. The <code>overlay</code> module will pull in the <code>widget</code>, <code>widget-stack</code>, <code>widget-position</code>, <code>widget-position-ext</code> and <code>widget-stdmod</code> dependencies it has.</p> |
|
|
219 |
|
|
|
220 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"overlay"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// We'll write example code here, where we have a Y.Overlay class available.</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"overlay"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
221 |
<span class="co1">// We'll write example code here, where we have a Y.Overlay class available.</span> |
|
|
222 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">YUI({...}).use("overlay", function(Y) { |
|
|
223 |
// We'll write example code here, where we have a Y.Overlay class available. |
|
|
224 |
});</textarea></div> |
|
|
225 |
<p>Using the <code>overlay</code> module will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.</p> |
|
|
226 |
|
|
|
227 |
<h4>Instantiating The Overlay</h4> |
|
|
228 |
|
|
|
229 |
<p>For this example we'll instantiate Overlays from script, as we did for the <a href="overlay-align.html">"Extended XY Positioning"</a> example. We'll create 6 Overlay instances and give them increasing zIndex and xy attribute values:</p> |
|
|
230 |
|
|
|
231 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> getOverlayXY<span class="br0">(</span>xy<span class="sy0">,</span> i<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="br0">[</span>xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> <span class="sy0">+</span> i <span class="sy0">*</span> <span class="nu0">60</span><span class="sy0">,</span> xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span> <span class="sy0">+</span> i <span class="sy0">*</span> <span class="nu0">40</span><span class="br0">]</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> n<span class="sy0">;</span> <span class="sy0">++</span>i<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> ovrXY <span class="sy0">=</span> getOverlayXY<span class="br0">(</span>xy<span class="sy0">,</span> i<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> ovrZIndex <span class="sy0">=</span> i<span class="sy0">+</span><span class="nu0">1</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Setup n Overlays, with increasing zIndex values and xy positions</span></div></li><li class="li1"><div class="de1"> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> zIndex<span class="sy0">:</span>ovrZIndex<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> xy<span class="sy0">:</span>ovrXY<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> width<span class="sy0">:</span><span class="st0">"8em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> height<span class="sy0">:</span><span class="st0">"8em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> headerContent<span class="sy0">:</span> <span class="st0">'Overlay <span class="yui-ovr-number">'</span> <span class="sy0">+</span> i <span class="sy0">+</span> <span class="st0">'</span>'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bodyContent<span class="sy0">:</span> <span class="st0">"zIndex = "</span> <span class="sy0">+</span> ovrZIndex</div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> overlay.<span class="me1">render</span><span class="br0">(</span><span class="st0">"#overlay-stack"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> ...</div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> getOverlayXY<span class="br0">(</span>xy<span class="sy0">,</span> i<span class="br0">)</span> <span class="br0">{</span> |
|
|
232 |
<span class="kw1">return</span> <span class="br0">[</span>xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> <span class="sy0">+</span> i <span class="sy0">*</span> <span class="nu0">60</span><span class="sy0">,</span> xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span> <span class="sy0">+</span> i <span class="sy0">*</span> <span class="nu0">40</span><span class="br0">]</span><span class="sy0">;</span> |
|
|
233 |
<span class="br0">}</span> |
|
|
234 |
|
|
|
235 |
<span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> n<span class="sy0">;</span> <span class="sy0">++</span>i<span class="br0">)</span> <span class="br0">{</span> |
|
|
236 |
|
|
|
237 |
ovrXY <span class="sy0">=</span> getOverlayXY<span class="br0">(</span>xy<span class="sy0">,</span> i<span class="br0">)</span><span class="sy0">;</span> |
|
|
238 |
ovrZIndex <span class="sy0">=</span> i<span class="sy0">+</span><span class="nu0">1</span><span class="sy0">;</span> |
|
|
239 |
|
|
|
240 |
<span class="co1">// Setup n Overlays, with increasing zIndex values and xy positions</span> |
|
|
241 |
overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span> |
|
|
242 |
zIndex<span class="sy0">:</span>ovrZIndex<span class="sy0">,</span> |
|
|
243 |
xy<span class="sy0">:</span>ovrXY<span class="sy0">,</span> |
|
|
244 |
|
|
|
245 |
width<span class="sy0">:</span><span class="st0">"8em"</span><span class="sy0">,</span> |
|
|
246 |
height<span class="sy0">:</span><span class="st0">"8em"</span><span class="sy0">,</span> |
|
|
247 |
headerContent<span class="sy0">:</span> <span class="st0">'Overlay <span class="yui-ovr-number">'</span> <span class="sy0">+</span> i <span class="sy0">+</span> <span class="st0">'</span>'</span><span class="sy0">,</span> |
|
|
248 |
bodyContent<span class="sy0">:</span> <span class="st0">"zIndex = "</span> <span class="sy0">+</span> ovrZIndex |
|
|
249 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
250 |
|
|
|
251 |
overlay.<span class="me1">render</span><span class="br0">(</span><span class="st0">"#overlay-stack"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
252 |
|
|
|
253 |
... |
|
|
254 |
|
|
|
255 |
<span class="br0">}</span></pre></div><textarea id="syntax2-plain">function getOverlayXY(xy, i) { |
|
|
256 |
return [xy[0] + i * 60, xy[1] + i * 40]; |
|
|
257 |
} |
|
|
258 |
|
|
|
259 |
for (var i = 0; i < n; ++i) { |
|
|
260 |
|
|
|
261 |
ovrXY = getOverlayXY(xy, i); |
|
|
262 |
ovrZIndex = i+1; |
|
|
263 |
|
|
|
264 |
// Setup n Overlays, with increasing zIndex values and xy positions |
|
|
265 |
overlay = new Y.Overlay({ |
|
|
266 |
zIndex:ovrZIndex, |
|
|
267 |
xy:ovrXY, |
|
|
268 |
|
|
|
269 |
width:"8em", |
|
|
270 |
height:"8em", |
|
|
271 |
headerContent: 'Overlay <span class="yui-ovr-number">' + i + '</span>', |
|
|
272 |
bodyContent: "zIndex = " + ovrZIndex |
|
|
273 |
}); |
|
|
274 |
|
|
|
275 |
overlay.render("#overlay-stack"); |
|
|
276 |
|
|
|
277 |
... |
|
|
278 |
|
|
|
279 |
}</textarea></div> |
|
|
280 |
<p>We store the Overlay instances in an <code>overlays</code> array, which we'll later use to sort the Overlays by their zIndex values. We also setup a listener for the <code>zIndex</code> attribute change event, which will update the body section of the Overlay to display its new zIndex value.</p> |
|
|
281 |
|
|
|
282 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">overlays.<span class="me1">push</span><span class="br0">(</span>overlay<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Update body whenever zIndex changes</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">after</span><span class="br0">(</span><span class="st0">"zIndexChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"bodyContent"</span><span class="sy0">,</span> <span class="st0">"zIndex = "</span> <span class="sy0">+</span> e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">overlays.<span class="me1">push</span><span class="br0">(</span>overlay<span class="br0">)</span><span class="sy0">;</span> |
|
|
283 |
|
|
|
284 |
<span class="co1">// Update body whenever zIndex changes</span> |
|
|
285 |
overlay.<span class="me1">after</span><span class="br0">(</span><span class="st0">"zIndexChange"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
286 |
<span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"bodyContent"</span><span class="sy0">,</span> <span class="st0">"zIndex = "</span> <span class="sy0">+</span> e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
287 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">overlays.push(overlay); |
|
|
288 |
|
|
|
289 |
// Update body whenever zIndex changes |
|
|
290 |
overlay.after("zIndexChange", function(e) { |
|
|
291 |
this.set("bodyContent", "zIndex = " + e.newVal); |
|
|
292 |
});</textarea></div> |
|
|
293 |
<h4>Handling MouseDown Using Widget.getByNode</h4> |
|
|
294 |
|
|
|
295 |
<p>The <code>Widget</code> class has a static <code>getByNode</code> method which can be used to retrieve Widget instances based on a node reference. The method will return the closest Widget which contains the given node.</p> |
|
|
296 |
|
|
|
297 |
<p> |
|
|
298 |
We'll use this method in a click listener bound to the container of the example ("#overlay-stack"). Target nodes of click events bubbled up to this example container, will be passed to the <code>Widget.getByNode</code> method, to see if an Overlay was clicked on. |
|
|
299 |
</p> |
|
|
300 |
|
|
|
301 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> onStackMouseDown<span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> widget <span class="sy0">=</span> Y.<span class="me1">Widget</span>.<span class="me1">getByNode</span><span class="br0">(</span>e.<span class="me1">target</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// If user clicked on an Overlay, bring it to the top of the stack</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>widget <span class="sy0">&&</span> widget <span class="kw1">instanceof</span> Y.<span class="me1">Overlay</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> bringToTop<span class="br0">(</span>widget<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"mousedown"</span><span class="sy0">,</span> onStackMouseDown<span class="sy0">,</span> <span class="st0">"#overlay-stack"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> onStackMouseDown<span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
302 |
<span class="kw2">var</span> widget <span class="sy0">=</span> Y.<span class="me1">Widget</span>.<span class="me1">getByNode</span><span class="br0">(</span>e.<span class="me1">target</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
303 |
|
|
|
304 |
<span class="co1">// If user clicked on an Overlay, bring it to the top of the stack</span> |
|
|
305 |
<span class="kw1">if</span> <span class="br0">(</span>widget <span class="sy0">&&</span> widget <span class="kw1">instanceof</span> Y.<span class="me1">Overlay</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
306 |
bringToTop<span class="br0">(</span>widget<span class="br0">)</span><span class="sy0">;</span> |
|
|
307 |
<span class="br0">}</span> |
|
|
308 |
<span class="br0">}</span> |
|
|
309 |
|
|
|
310 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"mousedown"</span><span class="sy0">,</span> onStackMouseDown<span class="sy0">,</span> <span class="st0">"#overlay-stack"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">function onStackMouseDown(e) { |
|
|
311 |
var widget = Y.Widget.getByNode(e.target); |
|
|
312 |
|
|
|
313 |
// If user clicked on an Overlay, bring it to the top of the stack |
|
|
314 |
if (widget && widget instanceof Y.Overlay) { |
|
|
315 |
bringToTop(widget); |
|
|
316 |
} |
|
|
317 |
} |
|
|
318 |
|
|
|
319 |
Y.on("mousedown", onStackMouseDown, "#overlay-stack");</textarea></div> |
|
|
320 |
<p>If an Overlay was clicked on, we invoke the simple bringToTop method which will set the zIndex of the clicked Overlay to the highest current Overlay zIndex value.</p> |
|
|
321 |
|
|
|
322 |
<h4>The <code>bringToTop</code> Implementation</h4> |
|
|
323 |
|
|
|
324 |
<p>We use a basic comparator function to sort the array of Overlays we have. The comparator makes sure the array element we're dealing with <a href="../widget/widget-build.html">has a <code>WidgetStack</code> implementation</a> (which Overlays do) and if so, sorts them in descending <code>zIndex</code> attribute value order:</p> |
|
|
325 |
|
|
|
326 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// zIndex comparator</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> byZIndexDesc<span class="br0">(</span>a<span class="sy0">,</span> b<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>a <span class="sy0">||</span> <span class="sy0">!</span>b <span class="sy0">||</span> <span class="sy0">!</span>a.<span class="me1">hasImpl</span><span class="br0">(</span>Y.<span class="me1">WidgetStack</span><span class="br0">)</span> <span class="sy0">||</span> <span class="sy0">!</span>b.<span class="me1">hasImpl</span><span class="br0">(</span>Y.<span class="me1">WidgetStack</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> aZ <span class="sy0">=</span> a.<span class="me1">get</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> bZ <span class="sy0">=</span> b.<span class="me1">get</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>aZ <span class="sy0">></span> bZ<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">return</span> <span class="sy0">-</span><span class="nu0">1</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">(</span>aZ <span class="sy0"><</span> bZ<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="nu0">1</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// zIndex comparator</span> |
|
|
327 |
<span class="kw2">function</span> byZIndexDesc<span class="br0">(</span>a<span class="sy0">,</span> b<span class="br0">)</span> <span class="br0">{</span> |
|
|
328 |
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>a <span class="sy0">||</span> <span class="sy0">!</span>b <span class="sy0">||</span> <span class="sy0">!</span>a.<span class="me1">hasImpl</span><span class="br0">(</span>Y.<span class="me1">WidgetStack</span><span class="br0">)</span> <span class="sy0">||</span> <span class="sy0">!</span>b.<span class="me1">hasImpl</span><span class="br0">(</span>Y.<span class="me1">WidgetStack</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
329 |
<span class="kw1">return</span> <span class="nu0">0</span><span class="sy0">;</span> |
|
|
330 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span> |
|
|
331 |
<span class="kw2">var</span> aZ <span class="sy0">=</span> a.<span class="me1">get</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
332 |
<span class="kw2">var</span> bZ <span class="sy0">=</span> b.<span class="me1">get</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
333 |
|
|
|
334 |
<span class="kw1">if</span> <span class="br0">(</span>aZ <span class="sy0">></span> bZ<span class="br0">)</span> <span class="br0">{</span> |
|
|
335 |
<span class="kw1">return</span> <span class="sy0">-</span><span class="nu0">1</span><span class="sy0">;</span> |
|
|
336 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">(</span>aZ <span class="sy0"><</span> bZ<span class="br0">)</span> <span class="br0">{</span> |
|
|
337 |
<span class="kw1">return</span> <span class="nu0">1</span><span class="sy0">;</span> |
|
|
338 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span> |
|
|
339 |
<span class="kw1">return</span> <span class="nu0">0</span><span class="sy0">;</span> |
|
|
340 |
<span class="br0">}</span> |
|
|
341 |
<span class="br0">}</span> |
|
|
342 |
<span class="br0">}</span></pre></div><textarea id="syntax5-plain">// zIndex comparator |
|
|
343 |
function byZIndexDesc(a, b) { |
|
|
344 |
if (!a || !b || !a.hasImpl(Y.WidgetStack) || !b.hasImpl(Y.WidgetStack)) { |
|
|
345 |
return 0; |
|
|
346 |
} else { |
|
|
347 |
var aZ = a.get("zIndex"); |
|
|
348 |
var bZ = b.get("zIndex"); |
|
|
349 |
|
|
|
350 |
if (aZ > bZ) { |
|
|
351 |
return -1; |
|
|
352 |
} else if (aZ < bZ) { |
|
|
353 |
return 1; |
|
|
354 |
} else { |
|
|
355 |
return 0; |
|
|
356 |
} |
|
|
357 |
} |
|
|
358 |
}</textarea></div> |
|
|
359 |
<p>Once sorted, for the purposes of the example, we simply switch the <code>zIndex</code> of the "highest" Overlay, with the Overlay which was clicked on, giving the selected Overlay the highest zIndex value:</p> |
|
|
360 |
|
|
|
361 |
<div id="syntax6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> bringToTop<span class="br0">(</span>overlay<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Sort overlays by their numerical zIndex values</span></div></li><li class="li1"><div class="de1"> overlays.<span class="me1">sort</span><span class="br0">(</span>byZIndexDesc<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Get the highest one</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> highest <span class="sy0">=</span> overlays<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// If the overlay is not the highest one, switch zIndices</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>highest <span class="sy0">!==</span> overlay<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> highestZ <span class="sy0">=</span> highest.<span class="me1">get</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> overlayZ <span class="sy0">=</span> overlay.<span class="me1">get</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="sy0">,</span> highestZ<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> highest.<span class="me1">set</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="sy0">,</span> overlayZ<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> bringToTop<span class="br0">(</span>overlay<span class="br0">)</span> <span class="br0">{</span> |
|
|
362 |
|
|
|
363 |
<span class="co1">// Sort overlays by their numerical zIndex values</span> |
|
|
364 |
overlays.<span class="me1">sort</span><span class="br0">(</span>byZIndexDesc<span class="br0">)</span><span class="sy0">;</span> |
|
|
365 |
|
|
|
366 |
<span class="co1">// Get the highest one</span> |
|
|
367 |
<span class="kw2">var</span> highest <span class="sy0">=</span> overlays<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="sy0">;</span> |
|
|
368 |
|
|
|
369 |
<span class="co1">// If the overlay is not the highest one, switch zIndices</span> |
|
|
370 |
<span class="kw1">if</span> <span class="br0">(</span>highest <span class="sy0">!==</span> overlay<span class="br0">)</span> <span class="br0">{</span> |
|
|
371 |
<span class="kw2">var</span> highestZ <span class="sy0">=</span> highest.<span class="me1">get</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
372 |
<span class="kw2">var</span> overlayZ <span class="sy0">=</span> overlay.<span class="me1">get</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
373 |
|
|
|
374 |
overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="sy0">,</span> highestZ<span class="br0">)</span><span class="sy0">;</span> |
|
|
375 |
highest.<span class="me1">set</span><span class="br0">(</span><span class="st0">"zIndex"</span><span class="sy0">,</span> overlayZ<span class="br0">)</span><span class="sy0">;</span> |
|
|
376 |
<span class="br0">}</span> |
|
|
377 |
<span class="br0">}</span></pre></div><textarea id="syntax6-plain">function bringToTop(overlay) { |
|
|
378 |
|
|
|
379 |
// Sort overlays by their numerical zIndex values |
|
|
380 |
overlays.sort(byZIndexDesc); |
|
|
381 |
|
|
|
382 |
// Get the highest one |
|
|
383 |
var highest = overlays[0]; |
|
|
384 |
|
|
|
385 |
// If the overlay is not the highest one, switch zIndices |
|
|
386 |
if (highest !== overlay) { |
|
|
387 |
var highestZ = highest.get("zIndex"); |
|
|
388 |
var overlayZ = overlay.get("zIndex"); |
|
|
389 |
|
|
|
390 |
overlay.set("zIndex", highestZ); |
|
|
391 |
highest.set("zIndex", overlayZ); |
|
|
392 |
} |
|
|
393 |
}</textarea></div> |
|
|
394 |
<h4>CSS: Overlay Look/Feel</h4> |
|
|
395 |
|
|
|
396 |
<p>As mentioned in the <a href="overlay-xy.html">"Basic XY Positioning"</a> example, the overlay.css Sam Skin file (build/overlay/assets/skins/sam/overlay.css) provides the default functional CSS for the overlay. Namely the CSS rules to hide the overlay, and position it absolutely. However there's no default out-of-the-box look/feel applied to the Overlay widget.</p> |
|
|
397 |
|
|
|
398 |
<p>The example provides it's own look and feel for the Overlay, by defining rules for the content box, header and body sections:</p> |
|
|
399 |
|
|
|
400 |
<div id="syntax7" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Overlay Look/Feel */</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui-overlay-content</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#000</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">font-size</span><span class="sy0">:</span><span class="re3"><span class="nu0">93</span>%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-hd</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">font-weight</span><span class="sy0">:</span><span class="kw2">bold</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">text-align</span><span class="sy0">:</span><span class="kw2">center</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#aa0000</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-bd</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">text-align</span><span class="sy0">:</span><span class="kw1">left</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#0000aa</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-hd</span> <span class="re1">.yui-ovr-number</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">color</span><span class="sy0">:</span><span class="re0">#aa0000</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* Overlay Look/Feel */</span> |
|
|
401 |
<span class="re1">.yui-overlay-content</span> <span class="br0">{</span> |
|
|
402 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span> |
|
|
403 |
<span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#000</span><span class="sy0">;</span> |
|
|
404 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span> |
|
|
405 |
<span class="kw1">font-size</span><span class="sy0">:</span><span class="re3"><span class="nu0">93</span>%</span><span class="sy0">;</span> |
|
|
406 |
<span class="br0">}</span> |
|
|
407 |
|
|
|
408 |
<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-hd</span> <span class="br0">{</span> |
|
|
409 |
<span class="kw1">font-weight</span><span class="sy0">:</span><span class="kw2">bold</span><span class="sy0">;</span> |
|
|
410 |
<span class="kw1">text-align</span><span class="sy0">:</span><span class="kw2">center</span><span class="sy0">;</span> |
|
|
411 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span> |
|
|
412 |
<span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#aa0000</span><span class="sy0">;</span> |
|
|
413 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span> |
|
|
414 |
<span class="br0">}</span> |
|
|
415 |
|
|
|
416 |
<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-bd</span> <span class="br0">{</span> |
|
|
417 |
<span class="kw1">text-align</span><span class="sy0">:</span><span class="kw1">left</span><span class="sy0">;</span> |
|
|
418 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span> |
|
|
419 |
<span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#0000aa</span><span class="sy0">;</span> |
|
|
420 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span> |
|
|
421 |
<span class="br0">}</span> |
|
|
422 |
|
|
|
423 |
<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-hd</span> <span class="re1">.yui-ovr-number</span> <span class="br0">{</span> |
|
|
424 |
<span class="kw1">color</span><span class="sy0">:</span><span class="re0">#aa0000</span><span class="sy0">;</span> |
|
|
425 |
<span class="br0">}</span></pre></div><textarea id="syntax7-plain">/* Overlay Look/Feel */ |
|
|
426 |
.yui-overlay-content { |
|
|
427 |
padding:2px; |
|
|
428 |
border:1px solid #000; |
|
|
429 |
background-color:#aaa; |
|
|
430 |
font-size:93%; |
|
|
431 |
} |
|
|
432 |
|
|
|
433 |
.yui-overlay-content .yui-widget-hd { |
|
|
434 |
font-weight:bold; |
|
|
435 |
text-align:center; |
|
|
436 |
padding:2px; |
|
|
437 |
border:2px solid #aa0000; |
|
|
438 |
background-color:#fff; |
|
|
439 |
} |
|
|
440 |
|
|
|
441 |
.yui-overlay-content .yui-widget-bd { |
|
|
442 |
text-align:left; |
|
|
443 |
padding:2px; |
|
|
444 |
border:2px solid #0000aa; |
|
|
445 |
background-color:#fff; |
|
|
446 |
} |
|
|
447 |
|
|
|
448 |
.yui-overlay-content .yui-widget-hd .yui-ovr-number { |
|
|
449 |
color:#aa0000; |
|
|
450 |
}</textarea></div> </div> |
|
|
451 |
<div class="yui-u sidebar"> |
|
|
452 |
|
|
|
453 |
|
|
|
454 |
<div id="examples" class="mod box4"> |
|
|
455 |
<div class="hd"> |
|
|
456 |
<h4> |
|
|
457 |
Overlay Examples:</h4> |
|
|
458 |
</div> |
|
|
459 |
<div class="bd"> |
|
|
460 |
<ul> |
|
|
461 |
<li><a href='../overlay/overlay-xy.html'>Basic XY Positioning</a></li><li><a href='../overlay/overlay-align.html'>Extended XY Positioning</a></li><li class='selected'><a href='../overlay/overlay-stack.html'>Stack Support</a></li><li><a href='../overlay/overlay-stdmod.html'>Standard Module Support</a></li><li><a href='../overlay/overlay-io-plugin.html'>IO Plugin</a></li><li><a href='../overlay/overlay-anim-plugin.html'>Animation Plugin</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a page theme on the fly (included with examples for StyleSheet)</a></li> </ul> |
|
|
462 |
</div> |
|
|
463 |
</div> |
|
|
464 |
|
|
|
465 |
<div class="mod box4"> |
|
|
466 |
<div class="hd"> |
|
|
467 |
<h4>More Overlay Resources:</h4> |
|
|
468 |
</div> |
|
|
469 |
<div class="bd"> |
|
|
470 |
<ul> |
|
|
471 |
<!-- <li><a href="http://developer.yahoo.com/yui/overlay/">User's Guide</a> (external)</li> --> |
|
|
472 |
<li><a href="../../api/module_overlay.html">API Documentation</a></li></ul> |
|
|
473 |
</div> |
|
|
474 |
</div> |
|
|
475 |
</div> |
|
|
476 |
</div> |
|
|
477 |
|
|
|
478 |
</div> |
|
|
479 |
</div> |
|
|
480 |
|
|
|
481 |
|
|
|
482 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
483 |
<!-- TABLE OF CONTENTS --> |
|
|
484 |
<div id="toc"> |
|
|
485 |
|
|
|
486 |
<ul> |
|
|
487 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="selected "><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul> |
|
|
488 |
</div> |
|
|
489 |
</div> |
|
|
490 |
</div><!--closes bd--> |
|
|
491 |
|
|
|
492 |
<div id="ft"> |
|
|
493 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
494 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
495 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
496 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
497 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
498 |
</div> |
|
|
499 |
</div> |
|
|
500 |
<script language="javascript"> |
|
|
501 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
502 |
</script> |
|
|
503 |
<script src="../../assets/syntax.js"></script> |
|
|
504 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
505 |
<script language="javascript"> |
|
|
506 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
507 |
</script> |
|
|
508 |
</body> |
|
|
509 |
</html> |