renderParentNode.html revision dc56725840a5725bb87cdd6c4073bf04d63e6b78
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai<html>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai<head>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai <title>YUI Widget Parent Node Tests</title>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai <meta http-equiv=content-type content="text/html; charset=utf-8">
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai <script src="/build/yui/yui.js"></script>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai <style>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai #red .yui-widget-content {
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai background-color:red;
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai }
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai #blue .yui-widget-content {
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai background-color:blue;
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai }
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai .yui-widget {
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai margin:10px;
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai }
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai .yui-widget-content {
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai padding:2px;
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai color:white;
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai background-color:green;
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai }
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai </style>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai</head>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai<body>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai <div id="blue"></div>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai <div id="red"></div>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai <script>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai YUI().use("widget", function(Y) {
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai var widget = new Y.Widget();
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai widget.get("contentBox").set("innerHTML", "render(docFrag) - Should be Blue");
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai // Render to a fragment
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai var frag = Y.one("doc").invoke("createDocumentFragment");
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai widget.render(frag);
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai // User responsible for putting the fragment contents somewhere...
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai Y.one("#blue").append(frag);
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai var widget2 = new Y.Widget();
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai widget2.get("contentBox").set("innerHTML", "render(divInDoc) - Should be Red");
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai widget2.render("#red");
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai var widget3 = new Y.Widget();
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai widget3.get("contentBox").set("innerHTML", "render() - Should be Green");
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai widget3.render();
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai });
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai </script>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai</body>
dc56725840a5725bb87cdd6c4073bf04d63e6b78Satyen Desai</html>