tests/manual/widgetCB.html

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