|
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 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
6 |
<title>Basic XY Positioning</title> |
|
|
7 |
|
|
|
8 |
<style type="text/css"> |
|
|
9 |
/*margin and padding on body element |
|
|
10 |
can introduce errors in determining |
|
|
11 |
element position and are not recommended; |
|
|
12 |
we turn them off as a foundation for YUI |
|
|
13 |
CSS treatments. */ |
|
|
14 |
body { |
|
|
15 |
margin:0; |
|
|
16 |
padding:0; |
|
|
17 |
} |
|
|
18 |
</style> |
|
|
19 |
|
|
|
20 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
21 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
22 |
|
|
|
23 |
|
|
|
24 |
<!--begin custom header content for this example--> |
|
|
25 |
<style type="text/css"> |
|
|
26 |
/* Overlay Look/Feel */ |
|
|
27 |
.yui-overlay-content { |
|
|
28 |
padding:3px; |
|
|
29 |
border:1px solid #000; |
|
|
30 |
background-color:#aaa; |
|
|
31 |
} |
|
|
32 |
|
|
|
33 |
.yui-overlay-content .yui-widget-hd { |
|
|
34 |
padding:5px; |
|
|
35 |
border:2px solid #aa0000; |
|
|
36 |
background-color:#fff; |
|
|
37 |
} |
|
|
38 |
|
|
|
39 |
.yui-overlay-content .yui-widget-bd { |
|
|
40 |
padding:5px; |
|
|
41 |
border:2px solid #0000aa; |
|
|
42 |
background-color:#fff; |
|
|
43 |
} |
|
|
44 |
|
|
|
45 |
.yui-overlay-content .yui-widget-ft { |
|
|
46 |
padding:5px; |
|
|
47 |
border:2px solid #00aa00; |
|
|
48 |
background-color:#fff; |
|
|
49 |
} |
|
|
50 |
|
|
|
51 |
/* Example Layout CSS */ |
|
|
52 |
.overlay-example { |
|
|
53 |
border:1px solid #000; |
|
|
54 |
background-color:#eee; |
|
|
55 |
padding:5px; |
|
|
56 |
margin:10px 0; |
|
|
57 |
height:15em; |
|
|
58 |
} |
|
|
59 |
|
|
|
60 |
.overlay-example button, .overlay-example label, .overlay-example select, .overlay-example input { |
|
|
61 |
margin-right:1px; |
|
|
62 |
} |
|
|
63 |
|
|
|
64 |
.overlay-example select.needs-shim { |
|
|
65 |
width:100%; |
|
|
66 |
} |
|
|
67 |
|
|
|
68 |
.overlay-example .filler { |
|
|
69 |
color:#999; |
|
|
70 |
} |
|
|
71 |
|
|
|
72 |
#show { |
|
|
73 |
margin-left:15px; |
|
|
74 |
} |
|
|
75 |
|
|
|
76 |
#x, #y { |
|
|
77 |
width:3em; |
|
|
78 |
} |
|
|
79 |
</style> |
|
|
80 |
|
|
|
81 |
<!--end custom header content for this example--> |
|
|
82 |
|
|
|
83 |
</head> |
|
|
84 |
|
|
|
85 |
<body class=" yui-skin-sam"> |
|
|
86 |
|
|
|
87 |
<h1>Basic XY Positioning</h1> |
|
|
88 |
|
|
|
89 |
<div class="exampleIntro"> |
|
|
90 |
<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> |
|
|
91 |
<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> |
|
|
92 |
|
|
|
93 |
|
|
|
94 |
</div> |
|
|
95 |
|
|
|
96 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
97 |
|
|
|
98 |
<div class="overlay-example" id="overlay-position"> |
|
|
99 |
|
|
|
100 |
<label>X: <input type="text" id="x" value="0" ></label> |
|
|
101 |
<label>Y: <input type="text" id="y" value="0" ></label> |
|
|
102 |
<button type="button" id="move">Move</button> |
|
|
103 |
<button type="button" id="show">Show</button> |
|
|
104 |
<button type="button" id="hide">Hide</button> |
|
|
105 |
|
|
|
106 |
<div id="overlay"> |
|
|
107 |
<div class="yui-widget-hd">Overlay Header</div> |
|
|
108 |
<div class="yui-widget-bd">Overlay Body</div> |
|
|
109 |
<div class="yui-widget-ft">Overlay Footer</div> |
|
|
110 |
</div> |
|
|
111 |
|
|
|
112 |
<p class="filler"> |
|
|
113 |
<select class="needs-shim"> |
|
|
114 |
<option>Prevent IE6 Bleedthrough</option> |
|
|
115 |
</select> |
|
|
116 |
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. |
|
|
117 |
</p> |
|
|
118 |
</div> |
|
|
119 |
|
|
|
120 |
<script type="text/javascript"> |
|
|
121 |
YUI({base:"../../build/", timeout: 10000}).use("overlay", function(Y) { |
|
|
122 |
|
|
|
123 |
var xy = Y.one("#overlay-position").getXY(); |
|
|
124 |
|
|
|
125 |
// Create an overlay from markup |
|
|
126 |
var overlay = new Y.Overlay({ |
|
|
127 |
contentBox:"#overlay", |
|
|
128 |
width:"10em", |
|
|
129 |
height:"10em", |
|
|
130 |
xy:[xy[0] + 10, xy[1] + 35] |
|
|
131 |
}); |
|
|
132 |
overlay.render(); |
|
|
133 |
|
|
|
134 |
var xInput = Y.one("#x"); |
|
|
135 |
var yInput = Y.one("#y"); |
|
|
136 |
|
|
|
137 |
// Using round to round sub-pixel values for FF3 just |
|
|
138 |
// to make the text box values prettier. |
|
|
139 |
xInput.set("value", Math.round(overlay.get("x"))); |
|
|
140 |
yInput.set("value", Math.round(overlay.get("y"))); |
|
|
141 |
|
|
|
142 |
Y.on("click", function(e) { |
|
|
143 |
var x = parseInt(xInput.get("value")); |
|
|
144 |
var y = parseInt(yInput.get("value")); |
|
|
145 |
overlay.move(x,y); |
|
|
146 |
}, "#move"); |
|
|
147 |
|
|
|
148 |
Y.on("click", Y.bind(overlay.show, overlay), "#show"); |
|
|
149 |
Y.on("click", Y.bind(overlay.hide, overlay), "#hide"); |
|
|
150 |
}); |
|
|
151 |
</script> |
|
|
152 |
|
|
|
153 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
154 |
|
|
|
155 |
</body> |
|
|
156 |
</html> |