|
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: Extended XY Positioning</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 |
/* Example Layout CSS */ |
|
|
44 |
.overlay-example { |
|
|
45 |
position:relative; |
|
|
46 |
border:1px solid #000; |
|
|
47 |
background-color:#eee; |
|
|
48 |
padding:5px; |
|
|
49 |
height:25em; |
|
|
50 |
} |
|
|
51 |
|
|
|
52 |
.overlay-example button { |
|
|
53 |
margin-left:1px; |
|
|
54 |
} |
|
|
55 |
|
|
|
56 |
.overlay-example .filler { |
|
|
57 |
color:#999; |
|
|
58 |
} |
|
|
59 |
|
|
|
60 |
.align-box { |
|
|
61 |
height:12em; |
|
|
62 |
width:12em; |
|
|
63 |
border:1px solid #000; |
|
|
64 |
margin:0px; |
|
|
65 |
text-align:center; |
|
|
66 |
} |
|
|
67 |
|
|
|
68 |
.align-box .title { |
|
|
69 |
font-weight:bold; |
|
|
70 |
color:#fff; |
|
|
71 |
padding:2px; |
|
|
72 |
} |
|
|
73 |
|
|
|
74 |
#align1 { |
|
|
75 |
position:static; |
|
|
76 |
background-color:#0000cc; |
|
|
77 |
} |
|
|
78 |
|
|
|
79 |
#align2 { |
|
|
80 |
position:relative; |
|
|
81 |
top:-130px; |
|
|
82 |
left:250px; |
|
|
83 |
background-color:#00cc00; |
|
|
84 |
} |
|
|
85 |
|
|
|
86 |
#align3 { |
|
|
87 |
position:absolute; |
|
|
88 |
bottom:130px; |
|
|
89 |
right:20px; |
|
|
90 |
background-color:#cc0000; |
|
|
91 |
} |
|
|
92 |
|
|
|
93 |
#alignment { |
|
|
94 |
padding:5px; |
|
|
95 |
display:inline; |
|
|
96 |
background-color:#fff; |
|
|
97 |
border:1px solid black; |
|
|
98 |
} |
|
|
99 |
|
|
|
100 |
#step { |
|
|
101 |
font-size:85%; |
|
|
102 |
margin-left:5px; |
|
|
103 |
} |
|
|
104 |
</style> |
|
|
105 |
</head> |
|
|
106 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
107 |
<div id="custom-doc" class="yui-t2"> |
|
|
108 |
<div id="hd"> |
|
|
109 |
<div id="ygunav"> |
|
|
110 |
<p> |
|
|
111 |
<em> |
|
|
112 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
113 |
</em> |
|
|
114 |
</p> |
|
|
115 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
116 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
117 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
118 |
<div id="sitesearch"> |
|
|
119 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
120 |
<input type="text" id="searchinput" name="p"> |
|
|
121 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
122 |
</div> |
|
|
123 |
</form> |
|
|
124 |
</div> |
|
|
125 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
126 |
<div id="pagetitle"><h1>YUI Library Examples: Overlay: Extended XY Positioning</h1></div> |
|
|
127 |
</div> |
|
|
128 |
<div id="bd"> |
|
|
129 |
|
|
|
130 |
|
|
|
131 |
<div id="yui-main"> |
|
|
132 |
<div class="yui-b"> |
|
|
133 |
<div class="yui-ge"> |
|
|
134 |
<div class="yui-u first example" id="main"> |
|
|
135 |
|
|
|
136 |
<h2>Overlay: Extended XY Positioning</h2> |
|
|
137 |
|
|
|
138 |
<div id="example" class="promo"> |
|
|
139 |
<div class="example-intro"> |
|
|
140 |
This example shows how you can use Overlay's extended positioning support to align or center the overlay either in the viewport or relative to another node on the page. You can specify any one of 9 points (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center, left-center, right-center, center) to align on both the Overlay and the node/viewport it is being aligned to. |
|
|
141 |
</div> |
|
|
142 |
|
|
|
143 |
<div class="module example-container "> |
|
|
144 |
<div class="hd exampleHd"> |
|
|
145 |
<p class="newWindowButton yui-skin-sam"> |
|
|
146 |
<a href="overlay-align_clean.html" target="_blank">View example in new window.</a> |
|
|
147 |
</p> |
|
|
148 |
</div> <div id="example-canvas" class="bd"> |
|
|
149 |
|
|
|
150 |
|
|
|
151 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
152 |
|
|
|
153 |
<div class="overlay-example" id="overlay-align"> |
|
|
154 |
<p><pre id="alignment"></pre><span id="step"></span></p> |
|
|
155 |
<p><button type="button" id="align">Next Alignment</button></p> |
|
|
156 |
<p class="filler">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.</p> |
|
|
157 |
<div id="align1" class="align-box"><span class="title">id = #align1</span></div> |
|
|
158 |
<div id="align2" class="align-box"><span class="title">id = #align2</span></div> |
|
|
159 |
<div id="align3" class="align-box"><span class="title">id = #align3</span></div> |
|
|
160 |
</div> |
|
|
161 |
|
|
|
162 |
<script type="text/javascript"> |
|
|
163 |
YUI({base:"../../build/", timeout: 10000}).use("overlay", function(Y) { |
|
|
164 |
|
|
|
165 |
/* Create Overlay from script, this time. No footer */ |
|
|
166 |
var overlay = new Y.Overlay({ |
|
|
167 |
width:"10em", |
|
|
168 |
height:"10em", |
|
|
169 |
headerContent: "Aligned Overlay", |
|
|
170 |
bodyContent: "Click the 'Align Next' button to try a new alignment", |
|
|
171 |
zIndex:2 |
|
|
172 |
}); |
|
|
173 |
|
|
|
174 |
/* Render it to #overlay-align element */ |
|
|
175 |
overlay.render("#overlay-align"); |
|
|
176 |
|
|
|
177 |
var alignment = Y.one("#alignment"); |
|
|
178 |
var stepNumber = Y.one("#step"); |
|
|
179 |
|
|
|
180 |
/* Setup local variable for Y.WidgetPositionExt, since we use it multiple times */ |
|
|
181 |
var WidgetPositionExt = Y.WidgetPositionExt; |
|
|
182 |
|
|
|
183 |
var steps = [ |
|
|
184 |
function() { |
|
|
185 |
/* Center in #overlay-align */ |
|
|
186 |
overlay.set("align", {node:"#overlay-align", points:[WidgetPositionExt.CC, WidgetPositionExt.CC]}); |
|
|
187 |
alignment.set("innerHTML", 'align: {node:"#overlay-align", points:["cc", "cc"]}'); |
|
|
188 |
}, |
|
|
189 |
function() { |
|
|
190 |
/* Align top-left corner of overlay, with top-right corner of #align1 */ |
|
|
191 |
overlay.set("align", {node:"#align1", points:[WidgetPositionExt.TL, WidgetPositionExt.TR]}); |
|
|
192 |
alignment.set("innerHTML", 'align: {node:"#align1", points:["tl", "tr"]}'); |
|
|
193 |
}, |
|
|
194 |
function() { |
|
|
195 |
/* Center overlay in #align2 */ |
|
|
196 |
overlay.set("centered", "#align2"); |
|
|
197 |
alignment.set("innerHTML", 'centered: "#align2"'); |
|
|
198 |
}, |
|
|
199 |
function() { |
|
|
200 |
/* Align right-center edge of overlay with right-center edge of viewport */ |
|
|
201 |
overlay.set("align", {points:[WidgetPositionExt.RC, WidgetPositionExt.RC]}); |
|
|
202 |
alignment.set("innerHTML", 'align: {points:["rc", "rc"]} (viewport)'); |
|
|
203 |
}, |
|
|
204 |
function() { |
|
|
205 |
/* Center overlay in viewport */ |
|
|
206 |
overlay.set("centered", true); |
|
|
207 |
alignment.set("innerHTML", "centered: true (viewport)"); |
|
|
208 |
}, |
|
|
209 |
function() { |
|
|
210 |
/* Align top-center edge of overlay with bottom-center edge of #align3 */ |
|
|
211 |
overlay.set("align", {node:"#align3", points:[WidgetPositionExt.TC, WidgetPositionExt.BC]}); |
|
|
212 |
alignment.set("innerHTML", 'align: {node:"#align3", points:["tc", "bc"]}'); |
|
|
213 |
} |
|
|
214 |
]; |
|
|
215 |
|
|
|
216 |
var step = 0; |
|
|
217 |
var totalSteps = steps.length; |
|
|
218 |
|
|
|
219 |
function alignNext() { |
|
|
220 |
stepNumber.set("innerHTML", "Alignment " + (step+1) + " of " + totalSteps); |
|
|
221 |
steps[step](); |
|
|
222 |
step = (++step)%(totalSteps); |
|
|
223 |
} |
|
|
224 |
|
|
|
225 |
alignNext(); |
|
|
226 |
|
|
|
227 |
Y.on("click", alignNext, "#align"); |
|
|
228 |
}); |
|
|
229 |
</script> |
|
|
230 |
|
|
|
231 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
232 |
|
|
|
233 |
|
|
|
234 |
</div> |
|
|
235 |
</div> |
|
|
236 |
</div> |
|
|
237 |
|
|
|
238 |
<h3>Extended XY Overlay Positioning - Align, Center Support</h3> |
|
|
239 |
|
|
|
240 |
<h4>Setting Up The YUI Instance</h4> |
|
|
241 |
|
|
|
242 |
<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> |
|
|
243 |
|
|
|
244 |
<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> |
|
|
245 |
<span class="co1">// We'll write example code here, where we have a Y.Overlay class available.</span> |
|
|
246 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">YUI({...}).use("overlay", function(Y) { |
|
|
247 |
// We'll write example code here, where we have a Y.Overlay class available. |
|
|
248 |
});</textarea></div> |
|
|
249 |
<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> |
|
|
250 |
|
|
|
251 |
<h4>Instantiating The Overlay</h4> |
|
|
252 |
|
|
|
253 |
<p>For this example, we'll instantiate an Overlay, as we did for the <a href="overlay-xy.html">"Basic XY Positioning"</a> example, however we'll set the content for the Overlay sections using the <code>headerContent</code> and <code>bodyContent</code> attributes. We won't create a footer section for this overlay:</p> |
|
|
254 |
|
|
|
255 |
<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="coMULTI">/* Create Overlay from script, this time. With no footer */</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> 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"> width<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> height<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> headerContent<span class="sy0">:</span> <span class="st0">"Aligned Overlay"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bodyContent<span class="sy0">:</span> <span class="st0">"Click the 'Align Next' button to try a new alignment"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> zIndex<span class="sy0">:</span><span class="nu0">2</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="co2">/* Render it as a child of the #overlay-align element */</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">render</span><span class="br0">(</span><span class="st0">"#overlay-align"</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="coMULTI">/* Create Overlay from script, this time. With no footer */</span> |
|
|
256 |
<span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span> |
|
|
257 |
width<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span> |
|
|
258 |
height<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span> |
|
|
259 |
headerContent<span class="sy0">:</span> <span class="st0">"Aligned Overlay"</span><span class="sy0">,</span> |
|
|
260 |
bodyContent<span class="sy0">:</span> <span class="st0">"Click the 'Align Next' button to try a new alignment"</span><span class="sy0">,</span> |
|
|
261 |
zIndex<span class="sy0">:</span><span class="nu0">2</span> |
|
|
262 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
263 |
|
|
|
264 |
<span class="co2">/* Render it as a child of the #overlay-align element */</span> |
|
|
265 |
overlay.<span class="me1">render</span><span class="br0">(</span><span class="st0">"#overlay-align"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">/* Create Overlay from script, this time. With no footer */ |
|
|
266 |
var overlay = new Y.Overlay({ |
|
|
267 |
width:"10em", |
|
|
268 |
height:"10em", |
|
|
269 |
headerContent: "Aligned Overlay", |
|
|
270 |
bodyContent: "Click the 'Align Next' button to try a new alignment", |
|
|
271 |
zIndex:2 |
|
|
272 |
}); |
|
|
273 |
|
|
|
274 |
/* Render it as a child of the #overlay-align element */ |
|
|
275 |
overlay.render("#overlay-align");</textarea></div> |
|
|
276 |
<p>Since the Overlay is created from script, and doesn't currently exist in the document, we pass the <code>overlay.render()</code> method a selector query (<code>"#overlay-align"</code>) for the node under which we want the Overlay to be rendered in the DOM. If we leave out this argument to render (or if the selector query doesn't bring back a node), the Overlay will be rendered to the current document's body element.</p> |
|
|
277 |
|
|
|
278 |
<h4>Aligning the overlay</h4> |
|
|
279 |
|
|
|
280 |
<p>The <a href="../../api/WidgetPositionExt.html"><code>WidgetPositionExt</code></a> extension used to create the overlay class adds the <code>align</code> and <code>centered</code> attributes to the Overlay, which can be used to align or center the Overlay relative to another element on the page (or the viewport).</p> |
|
|
281 |
|
|
|
282 |
<p>The <code>align</code> attribute accepts as a value an object literal with the following properties:</p> |
|
|
283 |
|
|
|
284 |
<dl> |
|
|
285 |
<dt>node</dt> |
|
|
286 |
<dd> |
|
|
287 |
The node to which the Widget is to be aligned. If set to null, or not provided, the Overlay is aligned to the viewport |
|
|
288 |
</dd> |
|
|
289 |
<dt>points</dt> |
|
|
290 |
<dd> |
|
|
291 |
<p> |
|
|
292 |
A two element array, defining the two points on the Overlay and node which are to be aligned. The first element is the point on the Overlay, and the second element is the point on the node (or viewport). |
|
|
293 |
Supported alignment points are defined as static properties on the <code>WidgetPositionExt</code> extension. |
|
|
294 |
</p> |
|
|
295 |
<p> |
|
|
296 |
e.g. <code>[Y.WidgetPositionExt.TR, Y.WidgetPositionExt.TL]</code> aligns the Top-Right corner of the Overlay with the |
|
|
297 |
Top-Left corner of the node/viewport, and <code>[Y.WidgetPositionExt.CC, Y.WidgetPositionExt.TC]</code> aligns the Center of the |
|
|
298 |
Overlay with the Top-Center edge of the node/viewport. |
|
|
299 |
</p> |
|
|
300 |
</dd> |
|
|
301 |
</dl> |
|
|
302 |
|
|
|
303 |
<p>The <code>centered</code> property can either by set to <code>true</code> to center the Overlay in the viewport, or set to a selector string or node reference to center the Overlay in a particular node.</p> |
|
|
304 |
|
|
|
305 |
<p>The example loops around a list of 6 alignment configurations, as the "Align Next" button is clicked:</p> |
|
|
306 |
|
|
|
307 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Setup local variable for Y.WidgetPositionExt, since we use it multiple times */</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> WidgetPositionExt <span class="sy0">=</span> Y.<span class="me1">WidgetPositionExt</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="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="co2">/* Center in #overlay-align (example box) */</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#overlay-align"</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> points<span class="sy0">:</span><span class="br0">[</span>WidgetPositionExt.<span class="me1">CC</span><span class="sy0">,</span> WidgetPositionExt.<span class="me1">CC</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="co2">/* Align top-left corner of overlay, with top-right corner of #align1 */</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#align1"</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> points<span class="sy0">:</span><span class="br0">[</span>WidgetPositionExt.<span class="me1">TL</span><span class="sy0">,</span> WidgetPositionExt.<span class="me1">TR</span><span class="br0">]</span><span class="br0">}</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="co2">/* Center overlay in #align2 */</span></div></li><li class="li2"><div class="de2">overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"centered"</span><span class="sy0">,</span> <span class="st0">"#align2"</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="co2">/* Align right-center edge of overlay with right-center edge of viewport */</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>points<span class="sy0">:</span><span class="br0">[</span>WidgetPositionExt.<span class="me1">RC</span><span class="sy0">,</span> WidgetPositionExt.<span class="me1">RC</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="co2">/* Center overlay in viewport */</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"centered"</span><span class="sy0">,</span> <span class="kw2">true</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="co2">/* Align top-center edge of overlay with bottom-center edge of #align3 */</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#align3"</span><span class="sy0">,</span> </div></li><li class="li2"><div class="de2"> points<span class="sy0">:</span><span class="br0">[</span>WidgetPositionExt.<span class="me1">TC</span><span class="sy0">,</span> WidgetPositionExt.<span class="me1">BC</span><span class="br0">]</span><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;"><span class="coMULTI">/* Setup local variable for Y.WidgetPositionExt, since we use it multiple times */</span> |
|
|
308 |
<span class="kw2">var</span> WidgetPositionExt <span class="sy0">=</span> Y.<span class="me1">WidgetPositionExt</span><span class="sy0">;</span> |
|
|
309 |
|
|
|
310 |
... |
|
|
311 |
|
|
|
312 |
<span class="co2">/* Center in #overlay-align (example box) */</span> |
|
|
313 |
overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#overlay-align"</span><span class="sy0">,</span> |
|
|
314 |
points<span class="sy0">:</span><span class="br0">[</span>WidgetPositionExt.<span class="me1">CC</span><span class="sy0">,</span> WidgetPositionExt.<span class="me1">CC</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
315 |
|
|
|
316 |
<span class="co2">/* Align top-left corner of overlay, with top-right corner of #align1 */</span> |
|
|
317 |
overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#align1"</span><span class="sy0">,</span> |
|
|
318 |
points<span class="sy0">:</span><span class="br0">[</span>WidgetPositionExt.<span class="me1">TL</span><span class="sy0">,</span> WidgetPositionExt.<span class="me1">TR</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
319 |
|
|
|
320 |
<span class="co2">/* Center overlay in #align2 */</span> |
|
|
321 |
overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"centered"</span><span class="sy0">,</span> <span class="st0">"#align2"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
322 |
|
|
|
323 |
<span class="co2">/* Align right-center edge of overlay with right-center edge of viewport */</span> |
|
|
324 |
overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>points<span class="sy0">:</span><span class="br0">[</span>WidgetPositionExt.<span class="me1">RC</span><span class="sy0">,</span> WidgetPositionExt.<span class="me1">RC</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
325 |
|
|
|
326 |
<span class="co2">/* Center overlay in viewport */</span> |
|
|
327 |
overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"centered"</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
328 |
|
|
|
329 |
<span class="co2">/* Align top-center edge of overlay with bottom-center edge of #align3 */</span> |
|
|
330 |
overlay.<span class="me1">set</span><span class="br0">(</span><span class="st0">"align"</span><span class="sy0">,</span> <span class="br0">{</span>node<span class="sy0">:</span><span class="st0">"#align3"</span><span class="sy0">,</span> |
|
|
331 |
points<span class="sy0">:</span><span class="br0">[</span>WidgetPositionExt.<span class="me1">TC</span><span class="sy0">,</span> WidgetPositionExt.<span class="me1">BC</span><span class="br0">]</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">/* Setup local variable for Y.WidgetPositionExt, since we use it multiple times */ |
|
|
332 |
var WidgetPositionExt = Y.WidgetPositionExt; |
|
|
333 |
|
|
|
334 |
... |
|
|
335 |
|
|
|
336 |
/* Center in #overlay-align (example box) */ |
|
|
337 |
overlay.set("align", {node:"#overlay-align", |
|
|
338 |
points:[WidgetPositionExt.CC, WidgetPositionExt.CC]}); |
|
|
339 |
|
|
|
340 |
/* Align top-left corner of overlay, with top-right corner of #align1 */ |
|
|
341 |
overlay.set("align", {node:"#align1", |
|
|
342 |
points:[WidgetPositionExt.TL, WidgetPositionExt.TR]}); |
|
|
343 |
|
|
|
344 |
/* Center overlay in #align2 */ |
|
|
345 |
overlay.set("centered", "#align2"); |
|
|
346 |
|
|
|
347 |
/* Align right-center edge of overlay with right-center edge of viewport */ |
|
|
348 |
overlay.set("align", {points:[WidgetPositionExt.RC, WidgetPositionExt.RC]}); |
|
|
349 |
|
|
|
350 |
/* Center overlay in viewport */ |
|
|
351 |
overlay.set("centered", true); |
|
|
352 |
|
|
|
353 |
/* Align top-center edge of overlay with bottom-center edge of #align3 */ |
|
|
354 |
overlay.set("align", {node:"#align3", |
|
|
355 |
points:[WidgetPositionExt.TC, WidgetPositionExt.BC]});</textarea></div> |
|
|
356 |
<p><strong>NOTE:</strong> Future verions will add support to re-align the Overlay in response to trigger events (e.g. window resize, scroll etc.) and support for constrained positioning.</p> |
|
|
357 |
|
|
|
358 |
<h4>CSS: Overlay Look/Feel</h4> |
|
|
359 |
|
|
|
360 |
<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> |
|
|
361 |
|
|
|
362 |
<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> |
|
|
363 |
|
|
|
364 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><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="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <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="li1"><div class="de1"> <span class="kw1">font-weight</span><span class="sy0">:</span><span class="kw2">bold</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <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="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li2"><div class="de2"> </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="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">#0000aa</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">#fff</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="re1">.yui-overlay-content</span> <span class="br0">{</span> |
|
|
365 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span> |
|
|
366 |
<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> |
|
|
367 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span> |
|
|
368 |
<span class="kw1">font-size</span><span class="sy0">:</span><span class="re3"><span class="nu0">93</span>%</span><span class="sy0">;</span> |
|
|
369 |
<span class="br0">}</span> |
|
|
370 |
|
|
|
371 |
<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-hd</span> <span class="br0">{</span> |
|
|
372 |
<span class="kw1">font-weight</span><span class="sy0">:</span><span class="kw2">bold</span><span class="sy0">;</span> |
|
|
373 |
<span class="kw1">text-align</span><span class="sy0">:</span><span class="kw2">center</span><span class="sy0">;</span> |
|
|
374 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span> |
|
|
375 |
<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> |
|
|
376 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span> |
|
|
377 |
<span class="br0">}</span> |
|
|
378 |
|
|
|
379 |
<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-bd</span> <span class="br0">{</span> |
|
|
380 |
<span class="kw1">text-align</span><span class="sy0">:</span><span class="kw1">left</span><span class="sy0">;</span> |
|
|
381 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span> |
|
|
382 |
<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> |
|
|
383 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span> |
|
|
384 |
<span class="br0">}</span></pre></div><textarea id="syntax4-plain">.yui-overlay-content { |
|
|
385 |
padding:2px; |
|
|
386 |
border:1px solid #000; |
|
|
387 |
background-color:#aaa; |
|
|
388 |
font-size:93%; |
|
|
389 |
} |
|
|
390 |
|
|
|
391 |
.yui-overlay-content .yui-widget-hd { |
|
|
392 |
font-weight:bold; |
|
|
393 |
text-align:center; |
|
|
394 |
padding:2px; |
|
|
395 |
border:2px solid #aa0000; |
|
|
396 |
background-color:#fff; |
|
|
397 |
} |
|
|
398 |
|
|
|
399 |
.yui-overlay-content .yui-widget-bd { |
|
|
400 |
text-align:left; |
|
|
401 |
padding:2px; |
|
|
402 |
border:2px solid #0000aa; |
|
|
403 |
background-color:#fff; |
|
|
404 |
}</textarea></div> </div> |
|
|
405 |
<div class="yui-u sidebar"> |
|
|
406 |
|
|
|
407 |
|
|
|
408 |
<div id="examples" class="mod box4"> |
|
|
409 |
<div class="hd"> |
|
|
410 |
<h4> |
|
|
411 |
Overlay Examples:</h4> |
|
|
412 |
</div> |
|
|
413 |
<div class="bd"> |
|
|
414 |
<ul> |
|
|
415 |
<li><a href='../overlay/overlay-xy.html'>Basic XY Positioning</a></li><li class='selected'><a href='../overlay/overlay-align.html'>Extended XY Positioning</a></li><li><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> |
|
|
416 |
</div> |
|
|
417 |
</div> |
|
|
418 |
|
|
|
419 |
<div class="mod box4"> |
|
|
420 |
<div class="hd"> |
|
|
421 |
<h4>More Overlay Resources:</h4> |
|
|
422 |
</div> |
|
|
423 |
<div class="bd"> |
|
|
424 |
<ul> |
|
|
425 |
<!-- <li><a href="http://developer.yahoo.com/yui/overlay/">User's Guide</a> (external)</li> --> |
|
|
426 |
<li><a href="../../api/module_overlay.html">API Documentation</a></li></ul> |
|
|
427 |
</div> |
|
|
428 |
</div> |
|
|
429 |
</div> |
|
|
430 |
</div> |
|
|
431 |
|
|
|
432 |
</div> |
|
|
433 |
</div> |
|
|
434 |
|
|
|
435 |
|
|
|
436 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
437 |
<!-- TABLE OF CONTENTS --> |
|
|
438 |
<div id="toc"> |
|
|
439 |
|
|
|
440 |
<ul> |
|
|
441 |
<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> |
|
|
442 |
</div> |
|
|
443 |
</div> |
|
|
444 |
</div><!--closes bd--> |
|
|
445 |
|
|
|
446 |
<div id="ft"> |
|
|
447 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
448 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
449 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
450 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
451 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
452 |
</div> |
|
|
453 |
</div> |
|
|
454 |
<script language="javascript"> |
|
|
455 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
456 |
</script> |
|
|
457 |
<script src="../../assets/syntax.js"></script> |
|
|
458 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
459 |
<script language="javascript"> |
|
|
460 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
461 |
</script> |
|
|
462 |
</body> |
|
|
463 |
</html> |