widgetCB.html revision ac183771e1b6ff195ceab9bbfa6e51bc15cb4c04
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Widget Class</title>
<link rel="stylesheet" type="text/css" href="/build/cssreset/reset.css" />
<link rel="stylesheet" type="text/css" href="/build/cssfonts/fonts.css" />
<script type="text/javascript" src="/build/yui/yui.js"></script>
<style>
body {
padding:0;
margin:0;
}
.yui3-widget {
background-color:green;
position:absolute;
top:50px;
left:50px;
}
.yui3-widget-content {
background-color:#ccc;
padding:20px;
border:10px solid blue;
}
.yui3-slider {
position:absolute;
background-color:transparent;
}
#x {
top:10px;
left:50px;
}
#y {
top:50px;
left:10px;
}
</style>
</head>
<body class="yui3-skin-sam">
<div class="yui3-widget-content">
<p>Some content which will drive size when</p>
<p>slider is set to 0 (translated to height/width = "");</p>
</div>
<script type="text/javascript">
YUI({filter:"raw"}).use("widget", "slider", function(Y) {
w = new Y.Widget({
contentBox: ".yui3-widget-content",
width:150,
height:150
}).render();
sh = new Y.Slider({
id:"y",
axis: 'y',
length: "1000px",
max:1000,
value: 150
}).render();
sw = new Y.Slider({
id:"x",
length: "1000px",
max:1000,
value:150
}).render();
sw.after("valueChange", function(e) {
w.set("width", e.newVal || "");
});
sh.after("valueChange", function(e) {
w.set("height", e.newVal || "");
});
});
</script>
</body>
</html>