tests/manual/widgetCB.html

	widgetCB.html revision b1c2d1f8735dc44a6c1a80f77447293503d5a054
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
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai        .yui-widget {
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai            background-color:green;
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai            position:absolute;
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai            top:50px;
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai            left:50px;
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai        }
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai        .yui-widget-content {
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai            background-color:#ccc;
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai            padding:20px;
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai            border:10px solid blue;
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai        }
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai        .yui-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>
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai<body class="yui-skin-sam">
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai    <div class="yui-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({
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                    contentBox: ".yui-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',
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                    thumbImage: Y.config.base + 'slider/assets/skins/sam/thumb-classic-y.png',
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                    railSize: "1000px",
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                    max:1000,
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                    value: 150
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                }).render();
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai            sw = new Y.Slider({
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                    id:"x",
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                    thumbImage: Y.config.base + 'slider/assets/skins/sam/thumb-classic-x.png',
b1c2d1f8735dc44a6c1a80f77447293503d5a054Satyen Desai                    railSize: "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>