|
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>Standard Module Support</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 |
zoom:1; |
|
|
57 |
} |
|
|
58 |
|
|
|
59 |
.overlay-example .fields { |
|
|
60 |
float:left; |
|
|
61 |
width:20em; |
|
|
62 |
} |
|
|
63 |
|
|
|
64 |
.overlay-example label { |
|
|
65 |
display:block; |
|
|
66 |
font-weight:bold; |
|
|
67 |
margin-bottom:3px |
|
|
68 |
} |
|
|
69 |
|
|
|
70 |
.overlay-example select { |
|
|
71 |
width:19em; |
|
|
72 |
} |
|
|
73 |
|
|
|
74 |
.overlay-example textarea { |
|
|
75 |
width:19em; |
|
|
76 |
height:15em; |
|
|
77 |
} |
|
|
78 |
|
|
|
79 |
.overlay-example .filler { |
|
|
80 |
margin-left:21em; |
|
|
81 |
margin-top:1em; |
|
|
82 |
color:#999; |
|
|
83 |
} |
|
|
84 |
|
|
|
85 |
.overlay-example:after { |
|
|
86 |
content:"."; |
|
|
87 |
display:block; |
|
|
88 |
height:0; |
|
|
89 |
clear:both; |
|
|
90 |
} |
|
|
91 |
</style> |
|
|
92 |
<!--end custom header content for this example--> |
|
|
93 |
|
|
|
94 |
</head> |
|
|
95 |
|
|
|
96 |
<body class=" yui-skin-sam"> |
|
|
97 |
|
|
|
98 |
<h1>Standard Module Support</h1> |
|
|
99 |
|
|
|
100 |
<div class="exampleIntro"> |
|
|
101 |
<p>This example shows how you can work either the <code>headerContent, bodyContent, footerContent</code> attributes, to replace content in the Overlay's standard module sections, or use the <code>setStdModContent(section, content, where)</code> method to insert content <em>before</em>, or append it <em>after</em> existing content in the section.</p> |
|
|
102 |
</div> |
|
|
103 |
|
|
|
104 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
105 |
|
|
|
106 |
<div class="overlay-example" id="overlay-stdmod"> |
|
|
107 |
<div id="overlay"> |
|
|
108 |
<div class="yui-widget-hd">Overlay Header</div> |
|
|
109 |
<div class="yui-widget-bd">Overlay Body</div> |
|
|
110 |
<div class="yui-widget-ft">Overlay Footer</div> |
|
|
111 |
</div> |
|
|
112 |
|
|
|
113 |
<div class="fields"> |
|
|
114 |
<p> |
|
|
115 |
<label for="content">New content:</label> |
|
|
116 |
<textarea name="content" id="content"></textarea> |
|
|
117 |
</p> |
|
|
118 |
<p> |
|
|
119 |
<label for="section">Section to add content to:</label> |
|
|
120 |
<select name="section" id="section"> |
|
|
121 |
<option value="header">Header</option> |
|
|
122 |
<option value="body">Body</option> |
|
|
123 |
<option value="footer">Footer</option> |
|
|
124 |
</select> |
|
|
125 |
</p> |
|
|
126 |
<p> |
|
|
127 |
<label for="where">Replace, insert before or append after existing content:</label> |
|
|
128 |
<select name="where" id="where"> |
|
|
129 |
<option value="before">Before</option> |
|
|
130 |
<option value="after">After</option> |
|
|
131 |
<option value="replace">Replace</option> |
|
|
132 |
</select> |
|
|
133 |
</p> |
|
|
134 |
<p> |
|
|
135 |
<label>Set new content as a string: <input type="checkbox" name="asString" id="asString" checked="true"></label> |
|
|
136 |
</p> |
|
|
137 |
<button type="button" id="setContent">Set Content</button> |
|
|
138 |
</div> |
|
|
139 |
<div class="filler"> |
|
|
140 |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tellus pede, aliquet vitae, faucibus quis, lobortis non, metus. Pellentesque at metus ac mi condimentum egestas. In vel neque a massa porttitor ultrices. Nunc lorem. Vivamus ullamcorper fringilla tortor. Etiam at nunc pellentesque lectus cursus pretium. Integer velit. In quis nunc eget leo rhoncus scelerisque. In in ante ac ante pharetra vestibulum. Praesent sit amet metus. Nam egestas ipsum. Nulla facilisi. Quisque rhoncus, eros sed convallis faucibus, erat felis pretium nisi, non bibendum magna mauris non metus. Integer mauris eros, volutpat non, pretium vitae, rutrum at, tellus. |
|
|
141 |
</div> |
|
|
142 |
</div> |
|
|
143 |
|
|
|
144 |
<script type="text/javascript"> |
|
|
145 |
YUI({base:"../../build/", timeout: 10000}).use("overlay", function(Y) { |
|
|
146 |
|
|
|
147 |
var overlay = new Y.Overlay({ |
|
|
148 |
contentBox:"#overlay", |
|
|
149 |
width:"20em", |
|
|
150 |
align: { |
|
|
151 |
node:"#overlay-stdmod > .filler", |
|
|
152 |
points:["tl", "tl"] |
|
|
153 |
} |
|
|
154 |
}); |
|
|
155 |
overlay.render(); |
|
|
156 |
|
|
|
157 |
var content = Y.one("#content"); |
|
|
158 |
var where = Y.one("#where"); |
|
|
159 |
var section = Y.one("#section"); |
|
|
160 |
var asString = Y.one("#asString"); |
|
|
161 |
|
|
|
162 |
Y.on("click", function() { |
|
|
163 |
var newContent = content.get("value"); |
|
|
164 |
if (! asString.get("checked") ) { |
|
|
165 |
// Set new content using Node references |
|
|
166 |
newContent = Y.Node.create(newContent); |
|
|
167 |
} |
|
|
168 |
overlay.setStdModContent(section.get("value"), newContent, where.get("value")); |
|
|
169 |
}, "#setContent"); |
|
|
170 |
}); |
|
|
171 |
</script> |
|
|
172 |
|
|
|
173 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
174 |
|
|
|
175 |
</body> |
|
|
176 |
</html> |