<div class="overlay-example yui3-skin-sam" id="overlay-example">
<div id="constrain-box"></div>
</div>
<script type="text/javascript">
YUI().use("overlay", "slider", function (Y) {
var constrainRegion = Y.one("#constrain-box").get("region"),
overlay, sx, yx, checkbox;
// Create Overlay from script.
overlay = new Y.Overlay({
id: "overlay",
width : "150px",
height: "120px",
headerContent: "Constrained",
bodyContent : "Use the sliders to move the overlay",
footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',
constrain: "#constrain-box",
align : {
node : "#constrain-box",
points: ["cc", "cc"]
},
render: "#overlay-example"
});
// Create horizontal Slider.
sx = new Y.Slider({
id : "x",
length: "450px",
min : constrainRegion.left - 50,
max : constrainRegion.right + 50,
value : overlay.get("x"),
render: "#overlay-example"
});
// Create vertical Slider.
sy = new Y.Slider({
id : "y",
axis : 'y',
length: "400px",
min : constrainRegion.top - 50,
max : constrainRegion.bottom + 50,
value : overlay.get("y"),
render: "#overlay-example"
});
sx.after("valueChange", function (e) {
overlay.set("x", e.newVal);
});
sy.after("valueChange", function (e) {
overlay.set("y", e.newVal);
});
function enableConstraints (constrain) {
if (constrain) {
overlay.set("constrain", "#constrain-box");
overlay.set("headerContent", "Constrained");
} else {
overlay.set("constrain", false);
overlay.set("headerContent", "Unconstrained");
}
// Sync the current values of the sliders to the overlay.
}
// Reference `<input type="checkbox" />` from the Overlay's footer.
checkbox = Y.one("#constrain");
checkbox.set("checked", true);
checkbox.on("click", function (e) {
enableConstraints(this.get("checked"));
});
// Enable constraints by default.
enableConstraints(true);
});
</script>