|
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: Basic 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:3px; |
|
|
23 |
border:1px solid #000; |
|
|
24 |
background-color:#aaa; |
|
|
25 |
} |
|
|
26 |
|
|
|
27 |
.yui-overlay-content .yui-widget-hd { |
|
|
28 |
padding:5px; |
|
|
29 |
border:2px solid #aa0000; |
|
|
30 |
background-color:#fff; |
|
|
31 |
} |
|
|
32 |
|
|
|
33 |
.yui-overlay-content .yui-widget-bd { |
|
|
34 |
padding:5px; |
|
|
35 |
border:2px solid #0000aa; |
|
|
36 |
background-color:#fff; |
|
|
37 |
} |
|
|
38 |
|
|
|
39 |
.yui-overlay-content .yui-widget-ft { |
|
|
40 |
padding:5px; |
|
|
41 |
border:2px solid #00aa00; |
|
|
42 |
background-color:#fff; |
|
|
43 |
} |
|
|
44 |
|
|
|
45 |
/* Example Layout CSS */ |
|
|
46 |
.overlay-example { |
|
|
47 |
border:1px solid #000; |
|
|
48 |
background-color:#eee; |
|
|
49 |
padding:5px; |
|
|
50 |
margin:10px 0; |
|
|
51 |
height:15em; |
|
|
52 |
} |
|
|
53 |
|
|
|
54 |
.overlay-example button, .overlay-example label, .overlay-example select, .overlay-example input { |
|
|
55 |
margin-right:1px; |
|
|
56 |
} |
|
|
57 |
|
|
|
58 |
.overlay-example select.needs-shim { |
|
|
59 |
width:100%; |
|
|
60 |
} |
|
|
61 |
|
|
|
62 |
.overlay-example .filler { |
|
|
63 |
color:#999; |
|
|
64 |
} |
|
|
65 |
|
|
|
66 |
#show { |
|
|
67 |
margin-left:15px; |
|
|
68 |
} |
|
|
69 |
|
|
|
70 |
#x, #y { |
|
|
71 |
width:3em; |
|
|
72 |
} |
|
|
73 |
</style> |
|
|
74 |
|
|
|
75 |
</head> |
|
|
76 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
77 |
<div id="custom-doc" class="yui-t2"> |
|
|
78 |
<div id="hd"> |
|
|
79 |
<div id="ygunav"> |
|
|
80 |
<p> |
|
|
81 |
<em> |
|
|
82 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
83 |
</em> |
|
|
84 |
</p> |
|
|
85 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
86 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
87 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
88 |
<div id="sitesearch"> |
|
|
89 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
90 |
<input type="text" id="searchinput" name="p"> |
|
|
91 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
92 |
</div> |
|
|
93 |
</form> |
|
|
94 |
</div> |
|
|
95 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
96 |
<div id="pagetitle"><h1>YUI Library Examples: Overlay: Basic XY Positioning</h1></div> |
|
|
97 |
</div> |
|
|
98 |
<div id="bd"> |
|
|
99 |
|
|
|
100 |
|
|
|
101 |
<div id="yui-main"> |
|
|
102 |
<div class="yui-b"> |
|
|
103 |
<div class="yui-ge"> |
|
|
104 |
<div class="yui-u first example" id="main"> |
|
|
105 |
|
|
|
106 |
<h2>Overlay: Basic XY Positioning</h2> |
|
|
107 |
|
|
|
108 |
<div id="example" class="promo"> |
|
|
109 |
<div class="example-intro"> |
|
|
110 |
<p>This example walks you through basics of creating and positioning an Overlay. It walks you through setting up the sandbox environment for the Overlay, including the required modules, and instantiating the Overlay based on markup already on the page.</p> |
|
|
111 |
<p>It also provides a couple of input fields, allowing you to invoke the Overlay's <code>move()</code> method, to move the Overlay to a specific XY position on the page.</p> |
|
|
112 |
|
|
|
113 |
</div> |
|
|
114 |
|
|
|
115 |
<div class="module example-container "> |
|
|
116 |
<div class="hd exampleHd"> |
|
|
117 |
<p class="newWindowButton yui-skin-sam"> |
|
|
118 |
<a href="overlay-xy_clean.html" target="_blank">View example in new window.</a> |
|
|
119 |
</p> |
|
|
120 |
</div> <div id="example-canvas" class="bd"> |
|
|
121 |
|
|
|
122 |
|
|
|
123 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
124 |
|
|
|
125 |
<div class="overlay-example" id="overlay-position"> |
|
|
126 |
|
|
|
127 |
<label>X: <input type="text" id="x" value="0" ></label> |
|
|
128 |
<label>Y: <input type="text" id="y" value="0" ></label> |
|
|
129 |
<button type="button" id="move">Move</button> |
|
|
130 |
<button type="button" id="show">Show</button> |
|
|
131 |
<button type="button" id="hide">Hide</button> |
|
|
132 |
|
|
|
133 |
<div id="overlay"> |
|
|
134 |
<div class="yui-widget-hd">Overlay Header</div> |
|
|
135 |
<div class="yui-widget-bd">Overlay Body</div> |
|
|
136 |
<div class="yui-widget-ft">Overlay Footer</div> |
|
|
137 |
</div> |
|
|
138 |
|
|
|
139 |
<p class="filler"> |
|
|
140 |
<select class="needs-shim"> |
|
|
141 |
<option>Prevent IE6 Bleedthrough</option> |
|
|
142 |
</select> |
|
|
143 |
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. |
|
|
144 |
</p> |
|
|
145 |
</div> |
|
|
146 |
|
|
|
147 |
<script type="text/javascript"> |
|
|
148 |
YUI({base:"../../build/", timeout: 10000}).use("overlay", function(Y) { |
|
|
149 |
|
|
|
150 |
var xy = Y.one("#overlay-position").getXY(); |
|
|
151 |
|
|
|
152 |
// Create an overlay from markup |
|
|
153 |
var overlay = new Y.Overlay({ |
|
|
154 |
contentBox:"#overlay", |
|
|
155 |
width:"10em", |
|
|
156 |
height:"10em", |
|
|
157 |
xy:[xy[0] + 10, xy[1] + 35] |
|
|
158 |
}); |
|
|
159 |
overlay.render(); |
|
|
160 |
|
|
|
161 |
var xInput = Y.one("#x"); |
|
|
162 |
var yInput = Y.one("#y"); |
|
|
163 |
|
|
|
164 |
// Using round to round sub-pixel values for FF3 just |
|
|
165 |
// to make the text box values prettier. |
|
|
166 |
xInput.set("value", Math.round(overlay.get("x"))); |
|
|
167 |
yInput.set("value", Math.round(overlay.get("y"))); |
|
|
168 |
|
|
|
169 |
Y.on("click", function(e) { |
|
|
170 |
var x = parseInt(xInput.get("value")); |
|
|
171 |
var y = parseInt(yInput.get("value")); |
|
|
172 |
overlay.move(x,y); |
|
|
173 |
}, "#move"); |
|
|
174 |
|
|
|
175 |
Y.on("click", Y.bind(overlay.show, overlay), "#show"); |
|
|
176 |
Y.on("click", Y.bind(overlay.hide, overlay), "#hide"); |
|
|
177 |
}); |
|
|
178 |
</script> |
|
|
179 |
|
|
|
180 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
181 |
|
|
|
182 |
|
|
|
183 |
</div> |
|
|
184 |
</div> |
|
|
185 |
</div> |
|
|
186 |
|
|
|
187 |
<h3>Basic XY Overlay Positioning</h3> |
|
|
188 |
|
|
|
189 |
<h4>Setting Up The YUI Instance</h4> |
|
|
190 |
|
|
|
191 |
<p>To create an instance of an Overlay on you 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> |
|
|
192 |
|
|
|
193 |
<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> |
|
|
194 |
<span class="co1">// We'll write example code here, where we have a Y.Overlay class available.</span> |
|
|
195 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">YUI({...}).use("overlay", function(Y) { |
|
|
196 |
// We'll write example code here, where we have a Y.Overlay class available. |
|
|
197 |
});</textarea></div> |
|
|
198 |
<p>Note, 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> |
|
|
199 |
|
|
|
200 |
<h4>Creating The Overlay From Markup</h4> |
|
|
201 |
|
|
|
202 |
<p>For this example, we'll create the overlay instance from markup which already exists on the page, and is shown below:</p> |
|
|
203 |
|
|
|
204 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"overlay"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-hd"</span>></span>Overlay Header<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-bd"</span>></span>Overlay Body<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-ft"</span>></span>Overlay Footer<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li2"><div class="de2"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"overlay"</span>></span> |
|
|
205 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-hd"</span>></span>Overlay Header<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
206 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-bd"</span>></span>Overlay Body<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
207 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-ft"</span>></span>Overlay Footer<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
208 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax2-plain"><div id="overlay"> |
|
|
209 |
<div class="yui-widget-hd">Overlay Header</div> |
|
|
210 |
<div class="yui-widget-bd">Overlay Body</div> |
|
|
211 |
<div class="yui-widget-ft">Overlay Footer</div> |
|
|
212 |
</div></textarea></div> |
|
|
213 |
<p>The container DIV with id="overlay" is specified as the contentBox for the Overlay instance, and during instantiation, the overlay will look for DIV's marked with the <code>yui-widget-hd, yui-widget-bd, yui-widget-ft</code> classes to setup the Overlay's header, body and footer content attributes.</p> |
|
|
214 |
|
|
|
215 |
<h4>Instantiating The Overlay</h4> |
|
|
216 |
|
|
|
217 |
<p>To create an overlay instance, we use the overlay constructor <code>Y.Overlay</code>, and pass it the <code>contentBox</code> node reference for the existing markup on the page. We also set a height/width for the overlay and the initial position for the Overlay (which otherwise defaults to 0,0):</p> |
|
|
218 |
|
|
|
219 |
<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="co1">// Create an overlay from markup, using an existing contentBox.</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"> contentBox<span class="sy0">:</span><span class="st0">"#overlay"</span><span class="sy0">,</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="li2"><div class="de2"> height<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> xy<span class="sy0">:</span><span class="br0">[</span>xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> <span class="sy0">+</span> <span class="nu0">10</span><span class="sy0">,</span> xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span> <span class="sy0">+</span> <span class="nu0">35</span><span class="br0">]</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">overlay.<span class="me1">render</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="co1">// Create an overlay from markup, using an existing contentBox.</span> |
|
|
220 |
<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> |
|
|
221 |
contentBox<span class="sy0">:</span><span class="st0">"#overlay"</span><span class="sy0">,</span> |
|
|
222 |
width<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span> |
|
|
223 |
height<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span> |
|
|
224 |
xy<span class="sy0">:</span><span class="br0">[</span>xy<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> <span class="sy0">+</span> <span class="nu0">10</span><span class="sy0">,</span> xy<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span> <span class="sy0">+</span> <span class="nu0">35</span><span class="br0">]</span> |
|
|
225 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
226 |
overlay.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">// Create an overlay from markup, using an existing contentBox. |
|
|
227 |
var overlay = new Y.Overlay({ |
|
|
228 |
contentBox:"#overlay", |
|
|
229 |
width:"10em", |
|
|
230 |
height:"10em", |
|
|
231 |
xy:[xy[0] + 10, xy[1] + 35] |
|
|
232 |
}); |
|
|
233 |
overlay.render();</textarea></div> |
|
|
234 |
<p>After creating the overlay instance, we invoke <code>overlay.render()</code> to update the DOM to reflect the current state of the overlay. Before render is called, the state of the Overlay should not be reflected in the DOM (for example, we can change the height, without it being reflected in the DOM. When we finally render, the current height value will be applied to the DOM). We could also pass an optional node reference to the render method, to have the overlay rendered under a different parent node, from where the content box currently lies.</p> |
|
|
235 |
|
|
|
236 |
<h4>Moving the Overlay</h4> |
|
|
237 |
|
|
|
238 |
<p>Overlays have support for basic page based XY positioning. This example provides a couple of input controls which can be used to move the overlay to a specific XY page co-ordinate. Later examples will show how Overlay's extended positioning support to align/center the Overlay relative to other elements on the page.</p> |
|
|
239 |
|
|
|
240 |
<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">var</span> xInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#x"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> yInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#y"</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">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</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"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> x <span class="sy0">=</span> parseInt<span class="br0">(</span>xInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> y <span class="sy0">=</span> parseInt<span class="br0">(</span>yInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</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"> overlay.<span class="me1">move</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#move"</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">var</span> xInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#x"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
241 |
<span class="kw2">var</span> yInput <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#y"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
242 |
|
|
|
243 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
244 |
|
|
|
245 |
<span class="kw2">var</span> x <span class="sy0">=</span> parseInt<span class="br0">(</span>xInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
246 |
<span class="kw2">var</span> y <span class="sy0">=</span> parseInt<span class="br0">(</span>yInput.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
247 |
|
|
|
248 |
overlay.<span class="me1">move</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span> |
|
|
249 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#move"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">var xInput = Y.one("#x"); |
|
|
250 |
var yInput = Y.one("#y"); |
|
|
251 |
|
|
|
252 |
Y.on("click", function(e) { |
|
|
253 |
|
|
|
254 |
var x = parseInt(xInput.get("value")); |
|
|
255 |
var y = parseInt(yInput.get("value")); |
|
|
256 |
|
|
|
257 |
overlay.move(x,y); |
|
|
258 |
}, "#move");</textarea></div> |
|
|
259 |
<p>Overlay can be moved by invoking the <code>move</code> method, with either seperate x and y arguments (<code>move(100,200)</code>), or as an array (<code>move([100,200])</code>). The <code>x, y and xy</code> attributes can also be used to move the overlay, and are equivalent to the move method (<code>overlay.set("x", 200);overlay.set("xy", [100,200])</code>)</p> |
|
|
260 |
|
|
|
261 |
<p>A select dropdown is added to the example page, along with additional content, to demonstrate the Overlay's ability to provide stacking and shimming support (to block select dropdown bleed through in IE6).</p> |
|
|
262 |
|
|
|
263 |
<h4>CSS: Overlay Look/Feel</h4> |
|
|
264 |
|
|
|
265 |
<p>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> |
|
|
266 |
|
|
|
267 |
<p>The example provides it's own look and feel for the Overlay, by defining rules for the content box, header, body and footer sections:</p> |
|
|
268 |
|
|
|
269 |
<div id="syntax5" 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">3px</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="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">padding</span><span class="sy0">:</span><span class="re3">5px</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">#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="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="li2"><div class="de2"> <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</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="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="li2"><div class="de2"><span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-ft</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">5px</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">#00aa00</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></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* Overlay Look/Feel */</span> |
|
|
270 |
<span class="re1">.yui-overlay-content</span> <span class="br0">{</span> |
|
|
271 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">3px</span><span class="sy0">;</span> |
|
|
272 |
<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> |
|
|
273 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span> |
|
|
274 |
<span class="br0">}</span> |
|
|
275 |
|
|
|
276 |
<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-hd</span> <span class="br0">{</span> |
|
|
277 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span> |
|
|
278 |
<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> |
|
|
279 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span> |
|
|
280 |
<span class="br0">}</span> |
|
|
281 |
|
|
|
282 |
<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-bd</span> <span class="br0">{</span> |
|
|
283 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span> |
|
|
284 |
<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> |
|
|
285 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span> |
|
|
286 |
<span class="br0">}</span> |
|
|
287 |
|
|
|
288 |
<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-ft</span> <span class="br0">{</span> |
|
|
289 |
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span> |
|
|
290 |
<span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#00aa00</span><span class="sy0">;</span> |
|
|
291 |
<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span> |
|
|
292 |
<span class="br0">}</span></pre></div><textarea id="syntax5-plain">/* Overlay Look/Feel */ |
|
|
293 |
.yui-overlay-content { |
|
|
294 |
padding:3px; |
|
|
295 |
border:1px solid #000; |
|
|
296 |
background-color:#aaa; |
|
|
297 |
} |
|
|
298 |
|
|
|
299 |
.yui-overlay-content .yui-widget-hd { |
|
|
300 |
padding:5px; |
|
|
301 |
border:2px solid #aa0000; |
|
|
302 |
background-color:#fff; |
|
|
303 |
} |
|
|
304 |
|
|
|
305 |
.yui-overlay-content .yui-widget-bd { |
|
|
306 |
padding:5px; |
|
|
307 |
border:2px solid #0000aa; |
|
|
308 |
background-color:#fff; |
|
|
309 |
} |
|
|
310 |
|
|
|
311 |
.yui-overlay-content .yui-widget-ft { |
|
|
312 |
padding:5px; |
|
|
313 |
border:2px solid #00aa00; |
|
|
314 |
background-color:#fff; |
|
|
315 |
}</textarea></div> |
|
|
316 |
<p><strong>NOTE:</strong> As discussed on the Widget landing page, all widgets are enclosed in 2 containing elements - the boundingBox is the outer(most) element, and the contentBox is the inner element into which the widget's content is added. It is advised to apply any look/feel CSS for the widget to the content box and it's children. This leaves the bounding box without padding/borders, allowing for consistent positioning/sizing across box models.</p> |
|
|
317 |
</div> |
|
|
318 |
<div class="yui-u sidebar"> |
|
|
319 |
|
|
|
320 |
|
|
|
321 |
<div id="examples" class="mod box4"> |
|
|
322 |
<div class="hd"> |
|
|
323 |
<h4> |
|
|
324 |
Overlay Examples:</h4> |
|
|
325 |
</div> |
|
|
326 |
<div class="bd"> |
|
|
327 |
<ul> |
|
|
328 |
<li class='selected'><a href='../overlay/overlay-xy.html'>Basic XY Positioning</a></li><li><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> |
|
|
329 |
</div> |
|
|
330 |
</div> |
|
|
331 |
|
|
|
332 |
<div class="mod box4"> |
|
|
333 |
<div class="hd"> |
|
|
334 |
<h4>More Overlay Resources:</h4> |
|
|
335 |
</div> |
|
|
336 |
<div class="bd"> |
|
|
337 |
<ul> |
|
|
338 |
<!-- <li><a href="http://developer.yahoo.com/yui/overlay/">User's Guide</a> (external)</li> --> |
|
|
339 |
<li><a href="../../api/module_overlay.html">API Documentation</a></li></ul> |
|
|
340 |
</div> |
|
|
341 |
</div> |
|
|
342 |
</div> |
|
|
343 |
</div> |
|
|
344 |
|
|
|
345 |
</div> |
|
|
346 |
</div> |
|
|
347 |
|
|
|
348 |
|
|
|
349 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
350 |
<!-- TABLE OF CONTENTS --> |
|
|
351 |
<div id="toc"> |
|
|
352 |
|
|
|
353 |
<ul> |
|
|
354 |
<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> |
|
|
355 |
</div> |
|
|
356 |
</div> |
|
|
357 |
</div><!--closes bd--> |
|
|
358 |
|
|
|
359 |
<div id="ft"> |
|
|
360 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
361 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
362 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
363 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
364 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
365 |
</div> |
|
|
366 |
</div> |
|
|
367 |
<script language="javascript"> |
|
|
368 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
369 |
</script> |
|
|
370 |
<script src="../../assets/syntax.js"></script> |
|
|
371 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
372 |
<script language="javascript"> |
|
|
373 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
374 |
</script> |
|
|
375 |
</body> |
|
|
376 |
</html> |