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