root/src/cm/media/js/lib/yui/yui3.0.0/examples/overlay/overlay-xy_clean.html

Revision 0:40c8f766c9b8, 4.4 KB (checked in by raph, 9 months ago)

import from internal svn r 4007
Line 
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. */
14body {
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">
121YUI({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>
Note: See TracBrowser for help on using the browser.