|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: Alignment Support</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
|
|
|
24 |
<h1>Example: Alignment Support</h1> |
|
|
25 |
<div class="yui3-g"> |
|
|
26 |
<div class="yui3-u-3-4"> |
|
|
27 |
<div id="main"> |
|
|
28 |
<div class="content"><style type="text/css" scoped> |
|
|
29 |
/* Overlay Look/Feel */ |
|
|
30 |
.yui3-overlay-content { |
|
|
31 |
background-color: #ECEFFB; |
|
|
32 |
border: 1px solid #9EA8C6; |
|
|
33 |
border-radius: 3px; |
|
|
34 |
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); |
|
|
35 |
} |
|
|
36 |
|
|
|
37 |
.yui3-overlay-content .yui3-widget-hd { |
|
|
38 |
background-color: #B6BFDA; |
|
|
39 |
color: #30418C; |
|
|
40 |
font-size: 120%; |
|
|
41 |
font-weight: bold; |
|
|
42 |
padding: 0.2em 0.5em 0.3em; |
|
|
43 |
border-radius: 2px 2px 0 0; |
|
|
44 |
} |
|
|
45 |
|
|
|
46 |
.yui3-overlay-content .yui3-widget-bd { |
|
|
47 |
padding: 0.4em 0.6em 0.5em; |
|
|
48 |
} |
|
|
49 |
|
|
|
50 |
.yui3-overlay-content .yui3-widget-ft { |
|
|
51 |
background-color:#DFE3F5; |
|
|
52 |
padding: 0.4em 0.6em 0.5em; |
|
|
53 |
border-radius: 0 0 2px 2px; |
|
|
54 |
} |
|
|
55 |
|
|
|
56 |
|
|
|
57 |
/* Example Layout CSS */ |
|
|
58 |
.example .overlay-example { |
|
|
59 |
position: relative; |
|
|
60 |
padding: 5px; |
|
|
61 |
height: 34.5em; |
|
|
62 |
} |
|
|
63 |
|
|
|
64 |
.example #overlay-align { |
|
|
65 |
border: solid 1px #fff; |
|
|
66 |
} |
|
|
67 |
|
|
|
68 |
.example .overlay-example button { |
|
|
69 |
margin-left: 1px; |
|
|
70 |
} |
|
|
71 |
|
|
|
72 |
.example .overlay-example .yui3-g { |
|
|
73 |
color: #999; |
|
|
74 |
} |
|
|
75 |
|
|
|
76 |
.example .align-box { |
|
|
77 |
background-color: #ddd; |
|
|
78 |
border: solid 1px #ddd; |
|
|
79 |
margin: 0px; |
|
|
80 |
text-align: center; |
|
|
81 |
width: 100%; |
|
|
82 |
} |
|
|
83 |
|
|
|
84 |
.example .overlay-example .content { |
|
|
85 |
margin: 0 1em 0 0; |
|
|
86 |
padding: 0; |
|
|
87 |
} |
|
|
88 |
|
|
|
89 |
.example .overlay-example .example-head { |
|
|
90 |
border-bottom: solid 1px #ddd; |
|
|
91 |
margin-bottom: 2em; |
|
|
92 |
padding-bottom: 1em; |
|
|
93 |
height: 8.6em; |
|
|
94 |
} |
|
|
95 |
|
|
|
96 |
.example .overlay-example .example-head pre{ |
|
|
97 |
margin: 0; |
|
|
98 |
} |
|
|
99 |
|
|
|
100 |
.example #alignment { |
|
|
101 |
position: absolute; |
|
|
102 |
right: 5px; |
|
|
103 |
text-align: left; |
|
|
104 |
top: 0; |
|
|
105 |
height: 9em; |
|
|
106 |
width: 36em; |
|
|
107 |
} |
|
|
108 |
|
|
|
109 |
.example .nav{ |
|
|
110 |
list-style-type: none; |
|
|
111 |
-moz-padding-start: 0; |
|
|
112 |
-webkit-padding-start: 0; |
|
|
113 |
padding-start: 0; |
|
|
114 |
margin: 0; |
|
|
115 |
padding: 0; |
|
|
116 |
} |
|
|
117 |
|
|
|
118 |
.example .nav li { |
|
|
119 |
border: solid 1px #ddd; |
|
|
120 |
width: 72px; |
|
|
121 |
height: 2em; |
|
|
122 |
line-height: 2em; |
|
|
123 |
text-indent: 0.3em; |
|
|
124 |
} |
|
|
125 |
|
|
|
126 |
.example .align-box .title { |
|
|
127 |
color: #000; |
|
|
128 |
padding: 2px; |
|
|
129 |
} |
|
|
130 |
|
|
|
131 |
.example #align2 { |
|
|
132 |
width: 383px; |
|
|
133 |
height: 164px; |
|
|
134 |
} |
|
|
135 |
|
|
|
136 |
.example #align3 { |
|
|
137 |
height: 3em; |
|
|
138 |
line-height: 3em; |
|
|
139 |
} |
|
|
140 |
|
|
|
141 |
|
|
|
142 |
.example #step { |
|
|
143 |
font-size: 55%; |
|
|
144 |
margin-left: 22px; |
|
|
145 |
font-weight: normal; |
|
|
146 |
} |
|
|
147 |
#main .aligned-to{ /* highlight the node that overlay is currently aligned to */ |
|
|
148 |
border: solid 1px #f00; |
|
|
149 |
} |
|
|
150 |
</style> |
|
|
151 |
|
|
|
152 |
<div class="intro"> |
|
|
153 |
<p>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.</p> |
|
|
154 |
</div> |
|
|
155 |
|
|
|
156 |
<div class="example"> |
|
|
157 |
<div class="overlay-example" id="overlay-align"> |
|
|
158 |
|
|
|
159 |
<div class="example-head"> |
|
|
160 |
<button type="button" class="button" id="align">View Next Alignment</button> |
|
|
161 |
<pre class="code" id="alignment"></pre> |
|
|
162 |
</div> |
|
|
163 |
<div class="yui3-g"> |
|
|
164 |
<div class="yui3-u-1-8"> |
|
|
165 |
<ul class="nav"> |
|
|
166 |
<li>Nibh</li> |
|
|
167 |
<li id="align1" class="align-box"><span class="title">#align1</span></li> |
|
|
168 |
<li>Arcu</li> |
|
|
169 |
<li>Congue</li> |
|
|
170 |
<li>Purus</li> |
|
|
171 |
<li>Quam</li> |
|
|
172 |
<li>Neque</li> |
|
|
173 |
<li>Aiquam</li> |
|
|
174 |
<li>Eget</li> |
|
|
175 |
<li>Etiam</li> |
|
|
176 |
</ul> |
|
|
177 |
</div> |
|
|
178 |
<div class="yui3-u-5-8"> |
|
|
179 |
<div class="content"> |
|
|
180 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam |
|
|
181 |
eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, |
|
|
182 |
luctus ut, |
|
|
183 |
interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices |
|
|
184 |
<img id="align2" class="align-box" src="../assets/overlay/img/nevada.png" alt="Nevada landscape (id='align2')"/> |
|
|
185 |
congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. |
|
|
186 |
Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. |
|
|
187 |
</div> |
|
|
188 |
</div> |
|
|
189 |
<div class="yui3-u-1-4"> |
|
|
190 |
<div class="content"> |
|
|
191 |
<div id="align3" class="align-box"><span class="title">#align3</span></div> |
|
|
192 |
Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris |
|
|
193 |
nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non |
|
|
194 |
urna. Nulla aliquam rhoncus est. |
|
|
195 |
</div> |
|
|
196 |
</div> |
|
|
197 |
|
|
|
198 |
|
|
|
199 |
</div> |
|
|
200 |
</div> |
|
|
201 |
|
|
|
202 |
<script type="text/javascript"> |
|
|
203 |
YUI().use("overlay", function(Y) { |
|
|
204 |
|
|
|
205 |
/* Create Overlay from script, this time. No footer */ |
|
|
206 |
var overlay = new Y.Overlay({ |
|
|
207 |
width:"16em", |
|
|
208 |
headerContent: 'Aligned Overlay<span id="step"></span>', |
|
|
209 |
bodyContent: '<div class="descr"></div>', |
|
|
210 |
zIndex:2 |
|
|
211 |
}); |
|
|
212 |
|
|
|
213 |
/* Render it to #overlay-align element */ |
|
|
214 |
overlay.render("#overlay-align"); |
|
|
215 |
|
|
|
216 |
var alignment = Y.one("#alignment"); |
|
|
217 |
var stepNumber = Y.one("#step"); |
|
|
218 |
var descr = Y.one('.yui3-widget-bd .descr'); |
|
|
219 |
|
|
|
220 |
/* Setup local variable for Y.WidgetPositionAlign, since we use it multiple times */ |
|
|
221 |
var a = Y.WidgetPositionAlign, |
|
|
222 |
declareA = "var a = Y.WidgetPositionAlign; // Local variable<br><br>", |
|
|
223 |
dontDeclareA = "<br><br>"; |
|
|
224 |
|
|
|
225 |
var steps = [ |
|
|
226 |
function() { |
|
|
227 |
/* Align top-left corner of overlay, with top-right corner of #align1 */ |
|
|
228 |
alignment.setHTML(declareA + 'overlay.set("align", {<br> node: "#align1",<br> points: [a.TL, a.TR]<br>});'); |
|
|
229 |
descr.setHTML('Align top-left corner of overlay, with top-right corner of #align1'); |
|
|
230 |
Y.one('#align1').addClass('aligned-to'); |
|
|
231 |
overlay.set("align", {node:"#align1", points: [a.TL, a.TR]}); |
|
|
232 |
}, |
|
|
233 |
function() { |
|
|
234 |
/* Center overlay in #align2 */ |
|
|
235 |
alignment.setHTML(dontDeclareA + 'overlay.set("centered", "#align2");'); |
|
|
236 |
descr.setHTML('Center overlay in #align2 <br>(an image)'); |
|
|
237 |
Y.one('#align2').addClass('aligned-to'); |
|
|
238 |
overlay.set("centered", "#align2"); |
|
|
239 |
}, |
|
|
240 |
function() { |
|
|
241 |
/* Align top-center edge of overlay with bottom-center edge of #align3 */ |
|
|
242 |
alignment.setHTML(declareA + 'overlay.set("align", {<br> node: "#align3",<br> points: [a.TC, a.BC]<br>});'); |
|
|
243 |
descr.setHTML('Align top-center edge of overlay with bottom-center edge of #align3'); |
|
|
244 |
Y.one('#align3').addClass('aligned-to'); |
|
|
245 |
overlay.set("align", {node:"#align3", points:[a.TC, a.BC]}); |
|
|
246 |
}, |
|
|
247 |
function() { |
|
|
248 |
/* Align right-center edge of overlay with right-center edge of viewport */ |
|
|
249 |
alignment.setHTML(declareA + 'overlay.set("align", {<br> points: [a.RC, a.RC]<br>});'); |
|
|
250 |
descr.setHTML('Align right-center edge of overlay with right-center edge of viewport'); |
|
|
251 |
overlay.set("align", {points:[a.RC, a.RC]}); |
|
|
252 |
}, |
|
|
253 |
function() { |
|
|
254 |
/* Center overlay in viewport */ |
|
|
255 |
alignment.setHTML(dontDeclareA + 'overlay.set("centered", true);'); |
|
|
256 |
descr.setHTML('Center overlay in viewport'); |
|
|
257 |
overlay.set("centered", true); |
|
|
258 |
}, |
|
|
259 |
function() { |
|
|
260 |
/* Center in #overlay-align */ |
|
|
261 |
alignment.setHTML(declareA + 'overlay.set("align", {<br> node: "#overlay-align",<br> points: [a.CC, a.CC]<br>});'); |
|
|
262 |
descr.setHTML('Center in #overlay-align'); |
|
|
263 |
Y.one('#overlay-align').addClass('aligned-to'); |
|
|
264 |
overlay.set("align", {node:"#overlay-align", points:[a.CC, a.CC]}); |
|
|
265 |
} |
|
|
266 |
]; |
|
|
267 |
|
|
|
268 |
var step = 0; |
|
|
269 |
var totalSteps = steps.length; |
|
|
270 |
|
|
|
271 |
function alignNext() { |
|
|
272 |
stepNumber.setHTML((step+1) + " of " + totalSteps); |
|
|
273 |
Y.all('.aligned-to').removeClass('aligned-to'); |
|
|
274 |
steps[step](); |
|
|
275 |
step = (++step)%(totalSteps); |
|
|
276 |
} |
|
|
277 |
|
|
|
278 |
alignNext(); |
|
|
279 |
|
|
|
280 |
Y.on("click", alignNext, "#align"); |
|
|
281 |
}); |
|
|
282 |
</script> |
|
|
283 |
|
|
|
284 |
</div> |
|
|
285 |
|
|
|
286 |
<h2>Aligned XY Overlay Positioning - align and center Support</h2> |
|
|
287 |
|
|
|
288 |
<h3>Setting Up The YUI Instance</h3> |
|
|
289 |
|
|
|
290 |
<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-align</code>, <code>widget-position-constrain</code> and <code>widget-stdmod</code> extensions it uses.</p> |
|
|
291 |
|
|
|
292 |
<pre class="code prettyprint">YUI({...}).use("overlay", function(Y) { |
|
|
293 |
// We'll write example code here, where we have a Y.Overlay class available. |
|
|
294 |
});</pre> |
|
|
295 |
|
|
|
296 |
|
|
|
297 |
<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> |
|
|
298 |
|
|
|
299 |
<p> |
|
|
300 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
301 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
302 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
303 |
</p> |
|
|
304 |
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
|
305 |
|
|
|
306 |
|
|
|
307 |
|
|
|
308 |
<h3>Instantiating The Overlay</h3> |
|
|
309 |
|
|
|
310 |
<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> |
|
|
311 |
|
|
|
312 |
<pre class="code prettyprint">/* Create Overlay from script, this time. With no footer */ |
|
|
313 |
var overlay = new Y.Overlay({ |
|
|
314 |
width:"16em", |
|
|
315 |
headerContent: 'Aligned Overlay<span id="step"></span>', |
|
|
316 |
bodyContent: '<div class="descr"></div><div id="alignment"></div>', |
|
|
317 |
zIndex:2 |
|
|
318 |
}); |
|
|
319 |
|
|
|
320 |
/* Render it as a child of the #overlay-align element */ |
|
|
321 |
overlay.render("#overlay-align");</pre> |
|
|
322 |
|
|
|
323 |
|
|
|
324 |
<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> |
|
|
325 |
|
|
|
326 |
<h3>Aligning the overlay</h3> |
|
|
327 |
|
|
|
328 |
<p>The <a href="http://yuilibrary.com/yui/docs/api/WidgetPositionAlign.html"><code>WidgetPositionAlign</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> |
|
|
329 |
|
|
|
330 |
<p>The <code>align</code> attribute accepts as a value an object literal with the following properties:</p> |
|
|
331 |
|
|
|
332 |
<dl> |
|
|
333 |
<dt>node</dt> |
|
|
334 |
<dd> |
|
|
335 |
The node to which the Widget is to be aligned. If set to null, or not provided, the Overlay is aligned to the viewport |
|
|
336 |
</dd> |
|
|
337 |
<dt>points</dt> |
|
|
338 |
<dd> |
|
|
339 |
<p> |
|
|
340 |
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). |
|
|
341 |
Supported alignment points are defined as static properties on the <code>WidgetPositionAlign</code> extension. |
|
|
342 |
</p> |
|
|
343 |
<p> |
|
|
344 |
e.g. <code>[Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TL]</code> aligns the Top-Right corner of the Overlay with the |
|
|
345 |
Top-Left corner of the node/viewport, and <code>[Y.WidgetPositionAlign.CC, Y.WidgetPositionAlign.TC]</code> aligns the Center of the |
|
|
346 |
Overlay with the Top-Center edge of the node/viewport. |
|
|
347 |
</p> |
|
|
348 |
</dd> |
|
|
349 |
</dl> |
|
|
350 |
|
|
|
351 |
<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> |
|
|
352 |
|
|
|
353 |
<p>The example loops around a list of 6 alignment configurations, as the "Align Next" button is clicked:</p> |
|
|
354 |
|
|
|
355 |
<pre class="code prettyprint">/* Setup local variable for Y.WidgetPositionAlign, since we use it multiple times */ |
|
|
356 |
var a = Y.WidgetPositionAlign; |
|
|
357 |
|
|
|
358 |
... |
|
|
359 |
|
|
|
360 |
/* Align top-left corner of overlay, with top-right corner of #align1 */ |
|
|
361 |
overlay.set("align", {node:"#align1", |
|
|
362 |
points:[a.TL, a.TR]}); |
|
|
363 |
|
|
|
364 |
/* Center overlay in #align2 */ |
|
|
365 |
overlay.set("centered", "#align2"); |
|
|
366 |
|
|
|
367 |
/* Align top-center edge of overlay with bottom-center edge of #align3 */ |
|
|
368 |
overlay.set("align", {node:"#align3", |
|
|
369 |
points:[a.TC, a.BC]}); |
|
|
370 |
|
|
|
371 |
/* Align right-center edge of overlay with right-center edge of viewport */ |
|
|
372 |
overlay.set("align", {points:[a.RC, a.RC]}); |
|
|
373 |
|
|
|
374 |
/* Center overlay in viewport */ |
|
|
375 |
overlay.set("centered", true); |
|
|
376 |
|
|
|
377 |
/* Center in #overlay-align (example box) */ |
|
|
378 |
overlay.set("align", {node:"#overlay-align", |
|
|
379 |
points:[a.CC, a.CC]});</pre> |
|
|
380 |
|
|
|
381 |
|
|
|
382 |
<h3>CSS: Overlay Look/Feel</h3> |
|
|
383 |
|
|
|
384 |
<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> |
|
|
385 |
|
|
|
386 |
<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> |
|
|
387 |
|
|
|
388 |
<pre class="code prettyprint">/* Overlay Look/Feel */ |
|
|
389 |
.yui3-overlay-content { |
|
|
390 |
background-color: #ECEFFB; |
|
|
391 |
border: 1px solid #9EA8C6; |
|
|
392 |
border-radius: 3px; |
|
|
393 |
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); |
|
|
394 |
} |
|
|
395 |
|
|
|
396 |
.yui3-overlay-content .yui3-widget-hd { |
|
|
397 |
background-color: #B6BFDA; |
|
|
398 |
color: #30418C; |
|
|
399 |
font-size: 120%; |
|
|
400 |
font-weight: bold; |
|
|
401 |
padding: 0.2em 0.5em 0.3em; |
|
|
402 |
border-radius: 2px 2px 0 0; |
|
|
403 |
} |
|
|
404 |
|
|
|
405 |
.yui3-overlay-content .yui3-widget-bd { |
|
|
406 |
padding: 0.4em 0.6em 0.5em; |
|
|
407 |
} |
|
|
408 |
|
|
|
409 |
.yui3-overlay-content .yui3-widget-ft { |
|
|
410 |
background-color:#DFE3F5; |
|
|
411 |
padding: 0.4em 0.6em 0.5em; |
|
|
412 |
border-radius: 0 0 2px 2px; |
|
|
413 |
}</pre> |
|
|
414 |
|
|
|
415 |
|
|
|
416 |
<h2>Complete Example Source</h2> |
|
|
417 |
<pre class="code prettyprint"><div class="overlay-example" id="overlay-align"> |
|
|
418 |
|
|
|
419 |
<div class="example-head"> |
|
|
420 |
<button type="button" class="button" id="align">View Next Alignment</button> |
|
|
421 |
<pre class="code" id="alignment"></pre> |
|
|
422 |
</div> |
|
|
423 |
<div class="yui3-g"> |
|
|
424 |
<div class="yui3-u-1-8"> |
|
|
425 |
<ul class="nav"> |
|
|
426 |
<li>Nibh</li> |
|
|
427 |
<li id="align1" class="align-box"><span class="title">#align1</span></li> |
|
|
428 |
<li>Arcu</li> |
|
|
429 |
<li>Congue</li> |
|
|
430 |
<li>Purus</li> |
|
|
431 |
<li>Quam</li> |
|
|
432 |
<li>Neque</li> |
|
|
433 |
<li>Aiquam</li> |
|
|
434 |
<li>Eget</li> |
|
|
435 |
<li>Etiam</li> |
|
|
436 |
</ul> |
|
|
437 |
</div> |
|
|
438 |
<div class="yui3-u-5-8"> |
|
|
439 |
<div class="content"> |
|
|
440 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam |
|
|
441 |
eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, |
|
|
442 |
luctus ut, |
|
|
443 |
interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices |
|
|
444 |
<img id="align2" class="align-box" src="../assets/overlay/img/nevada.png" alt="Nevada landscape (id='align2')"/> |
|
|
445 |
congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. |
|
|
446 |
Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. |
|
|
447 |
</div> |
|
|
448 |
</div> |
|
|
449 |
<div class="yui3-u-1-4"> |
|
|
450 |
<div class="content"> |
|
|
451 |
<div id="align3" class="align-box"><span class="title">#align3</span></div> |
|
|
452 |
Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris |
|
|
453 |
nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non |
|
|
454 |
urna. Nulla aliquam rhoncus est. |
|
|
455 |
</div> |
|
|
456 |
</div> |
|
|
457 |
|
|
|
458 |
|
|
|
459 |
</div> |
|
|
460 |
</div> |
|
|
461 |
|
|
|
462 |
<script type="text/javascript"> |
|
|
463 |
YUI().use("overlay", function(Y) { |
|
|
464 |
|
|
|
465 |
/* Create Overlay from script, this time. No footer */ |
|
|
466 |
var overlay = new Y.Overlay({ |
|
|
467 |
width:"16em", |
|
|
468 |
headerContent: 'Aligned Overlay<span id="step"></span>', |
|
|
469 |
bodyContent: '<div class="descr"></div>', |
|
|
470 |
zIndex:2 |
|
|
471 |
}); |
|
|
472 |
|
|
|
473 |
/* Render it to #overlay-align element */ |
|
|
474 |
overlay.render("#overlay-align"); |
|
|
475 |
|
|
|
476 |
var alignment = Y.one("#alignment"); |
|
|
477 |
var stepNumber = Y.one("#step"); |
|
|
478 |
var descr = Y.one('.yui3-widget-bd .descr'); |
|
|
479 |
|
|
|
480 |
/* Setup local variable for Y.WidgetPositionAlign, since we use it multiple times */ |
|
|
481 |
var a = Y.WidgetPositionAlign, |
|
|
482 |
declareA = "var a = Y.WidgetPositionAlign; // Local variable<br><br>", |
|
|
483 |
dontDeclareA = "<br><br>"; |
|
|
484 |
|
|
|
485 |
var steps = [ |
|
|
486 |
function() { |
|
|
487 |
/* Align top-left corner of overlay, with top-right corner of #align1 */ |
|
|
488 |
alignment.setHTML(declareA + 'overlay.set("align", {<br> node: "#align1",<br> points: [a.TL, a.TR]<br>});'); |
|
|
489 |
descr.setHTML('Align top-left corner of overlay, with top-right corner of #align1'); |
|
|
490 |
Y.one('#align1').addClass('aligned-to'); |
|
|
491 |
overlay.set("align", {node:"#align1", points: [a.TL, a.TR]}); |
|
|
492 |
}, |
|
|
493 |
function() { |
|
|
494 |
/* Center overlay in #align2 */ |
|
|
495 |
alignment.setHTML(dontDeclareA + 'overlay.set("centered", "#align2");'); |
|
|
496 |
descr.setHTML('Center overlay in #align2 <br>(an image)'); |
|
|
497 |
Y.one('#align2').addClass('aligned-to'); |
|
|
498 |
overlay.set("centered", "#align2"); |
|
|
499 |
}, |
|
|
500 |
function() { |
|
|
501 |
/* Align top-center edge of overlay with bottom-center edge of #align3 */ |
|
|
502 |
alignment.setHTML(declareA + 'overlay.set("align", {<br> node: "#align3",<br> points: [a.TC, a.BC]<br>});'); |
|
|
503 |
descr.setHTML('Align top-center edge of overlay with bottom-center edge of #align3'); |
|
|
504 |
Y.one('#align3').addClass('aligned-to'); |
|
|
505 |
overlay.set("align", {node:"#align3", points:[a.TC, a.BC]}); |
|
|
506 |
}, |
|
|
507 |
function() { |
|
|
508 |
/* Align right-center edge of overlay with right-center edge of viewport */ |
|
|
509 |
alignment.setHTML(declareA + 'overlay.set("align", {<br> points: [a.RC, a.RC]<br>});'); |
|
|
510 |
descr.setHTML('Align right-center edge of overlay with right-center edge of viewport'); |
|
|
511 |
overlay.set("align", {points:[a.RC, a.RC]}); |
|
|
512 |
}, |
|
|
513 |
function() { |
|
|
514 |
/* Center overlay in viewport */ |
|
|
515 |
alignment.setHTML(dontDeclareA + 'overlay.set("centered", true);'); |
|
|
516 |
descr.setHTML('Center overlay in viewport'); |
|
|
517 |
overlay.set("centered", true); |
|
|
518 |
}, |
|
|
519 |
function() { |
|
|
520 |
/* Center in #overlay-align */ |
|
|
521 |
alignment.setHTML(declareA + 'overlay.set("align", {<br> node: "#overlay-align",<br> points: [a.CC, a.CC]<br>});'); |
|
|
522 |
descr.setHTML('Center in #overlay-align'); |
|
|
523 |
Y.one('#overlay-align').addClass('aligned-to'); |
|
|
524 |
overlay.set("align", {node:"#overlay-align", points:[a.CC, a.CC]}); |
|
|
525 |
} |
|
|
526 |
]; |
|
|
527 |
|
|
|
528 |
var step = 0; |
|
|
529 |
var totalSteps = steps.length; |
|
|
530 |
|
|
|
531 |
function alignNext() { |
|
|
532 |
stepNumber.setHTML((step+1) + " of " + totalSteps); |
|
|
533 |
Y.all('.aligned-to').removeClass('aligned-to'); |
|
|
534 |
steps[step](); |
|
|
535 |
step = (++step)%(totalSteps); |
|
|
536 |
} |
|
|
537 |
|
|
|
538 |
alignNext(); |
|
|
539 |
|
|
|
540 |
Y.on("click", alignNext, "#align"); |
|
|
541 |
}); |
|
|
542 |
</script></pre> |
|
|
543 |
|
|
|
544 |
</div> |
|
|
545 |
</div> |
|
|
546 |
</div> |
|
|
547 |
|
|
|
548 |
<div class="yui3-u-1-4"> |
|
|
549 |
<div class="sidebar"> |
|
|
550 |
|
|
|
551 |
|
|
|
552 |
|
|
|
553 |
<div class="sidebox"> |
|
|
554 |
<div class="hd"> |
|
|
555 |
<h2 class="no-toc">Examples</h2> |
|
|
556 |
</div> |
|
|
557 |
|
|
|
558 |
<div class="bd"> |
|
|
559 |
<ul class="examples"> |
|
|
560 |
|
|
|
561 |
|
|
|
562 |
<li data-description="Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support."> |
|
|
563 |
<a href="overlay-xy.html">Basic XY Positioning</a> |
|
|
564 |
</li> |
|
|
565 |
|
|
|
566 |
|
|
|
567 |
|
|
|
568 |
<li data-description="Shows how to create a simple tooltip incorporating the overlay shim feature."> |
|
|
569 |
<a href="overlay-tooltip.html">Simple Tooltip</a> |
|
|
570 |
</li> |
|
|
571 |
|
|
|
572 |
|
|
|
573 |
|
|
|
574 |
<li data-description="Shows how to use the Overlay's XY alignment support, to align the Overlay relative to another element, or to the viewport."> |
|
|
575 |
<a href="overlay-align.html">Alignment Support</a> |
|
|
576 |
</li> |
|
|
577 |
|
|
|
578 |
|
|
|
579 |
|
|
|
580 |
<li data-description="Shows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page."> |
|
|
581 |
<a href="overlay-stack.html">Stack Support</a> |
|
|
582 |
</li> |
|
|
583 |
|
|
|
584 |
|
|
|
585 |
|
|
|
586 |
<li data-description="Shows how to modify content in the Overlay's header, body and footer sections."> |
|
|
587 |
<a href="overlay-stdmod.html">Standard Module Support</a> |
|
|
588 |
</li> |
|
|
589 |
|
|
|
590 |
|
|
|
591 |
|
|
|
592 |
<li data-description="Shows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay."> |
|
|
593 |
<a href="overlay-constrain.html">Constrain Support</a> |
|
|
594 |
</li> |
|
|
595 |
|
|
|
596 |
|
|
|
597 |
|
|
|
598 |
<li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility."> |
|
|
599 |
<a href="overlay-io-plugin.html">IO Plugin</a> |
|
|
600 |
</li> |
|
|
601 |
|
|
|
602 |
|
|
|
603 |
|
|
|
604 |
<li data-description="Shows how to create a simple plugin to animate the Overlay's movement and visibility."> |
|
|
605 |
<a href="overlay-anim-plugin.html">Animation Plugin</a> |
|
|
606 |
</li> |
|
|
607 |
|
|
|
608 |
|
|
|
609 |
|
|
|
610 |
|
|
|
611 |
|
|
|
612 |
|
|
|
613 |
</ul> |
|
|
614 |
</div> |
|
|
615 |
</div> |
|
|
616 |
|
|
|
617 |
|
|
|
618 |
|
|
|
619 |
<div class="sidebox"> |
|
|
620 |
<div class="hd"> |
|
|
621 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
622 |
</div> |
|
|
623 |
|
|
|
624 |
<div class="bd"> |
|
|
625 |
<ul class="examples"> |
|
|
626 |
|
|
|
627 |
|
|
|
628 |
|
|
|
629 |
|
|
|
630 |
|
|
|
631 |
|
|
|
632 |
|
|
|
633 |
|
|
|
634 |
|
|
|
635 |
|
|
|
636 |
|
|
|
637 |
|
|
|
638 |
|
|
|
639 |
|
|
|
640 |
|
|
|
641 |
|
|
|
642 |
|
|
|
643 |
|
|
|
644 |
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States."> |
|
|
645 |
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
|
646 |
</li> |
|
|
647 |
|
|
|
648 |
|
|
|
649 |
|
|
|
650 |
<li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input"> |
|
|
651 |
<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a> |
|
|
652 |
</li> |
|
|
653 |
|
|
|
654 |
|
|
|
655 |
</ul> |
|
|
656 |
</div> |
|
|
657 |
</div> |
|
|
658 |
|
|
|
659 |
</div> |
|
|
660 |
</div> |
|
|
661 |
</div> |
|
|
662 |
</div> |
|
|
663 |
|
|
|
664 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
665 |
<script>prettyPrint();</script> |
|
|
666 |
|
|
|
667 |
<script> |
|
|
668 |
YUI.Env.Tests = { |
|
|
669 |
examples: [], |
|
|
670 |
project: '../assets', |
|
|
671 |
assets: '../assets/overlay', |
|
|
672 |
name: 'overlay-align', |
|
|
673 |
title: 'Alignment Support', |
|
|
674 |
newWindow: '', |
|
|
675 |
auto: false |
|
|
676 |
}; |
|
|
677 |
YUI.Env.Tests.examples.push('overlay-xy'); |
|
|
678 |
YUI.Env.Tests.examples.push('overlay-tooltip'); |
|
|
679 |
YUI.Env.Tests.examples.push('overlay-align'); |
|
|
680 |
YUI.Env.Tests.examples.push('overlay-stack'); |
|
|
681 |
YUI.Env.Tests.examples.push('overlay-stdmod'); |
|
|
682 |
YUI.Env.Tests.examples.push('overlay-constrain'); |
|
|
683 |
YUI.Env.Tests.examples.push('overlay-io-plugin'); |
|
|
684 |
YUI.Env.Tests.examples.push('overlay-anim-plugin'); |
|
|
685 |
YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
|
686 |
YUI.Env.Tests.examples.push('stylesheet-theme'); |
|
|
687 |
|
|
|
688 |
</script> |
|
|
689 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
690 |
|
|
|
691 |
|
|
|
692 |
|
|
|
693 |
</body> |
|
|
694 |
</html> |