JavaScript Tutorial/Dojo toolkit/BorderLayout
Версия от 21:52, 25 мая 2010; (обсуждение)
Содержание
DOM node from border layout
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dojo.parser"); dojo.addOnLoad(function( ) { var bc = new dijit.layout.BorderContainer( { design: "headline", style: "height:500px;border:solid 3px" }, "bc" ); var topContentPane = new dijit.layout.ContentPane( { region: "top", style: "background-color:#f21;height:100px;", splitter: true, minSize : 10, maxSize : 100 }, document.createElement("div") ); var centerContentPane = new dijit.layout.ContentPane( { region: "center" }, document.createElement("div") ); var bottomContentPane = new dijit.layout.ContentPane( { region: "bottom", style: "height:100px;", splitter: true }, document.createElement("div") ); bc.domNode.appendChild(topContentPane.domNode); bc.domNode.appendChild(centerContentPane.domNode); bc.domNode.appendChild(bottomContentPane.domNode); bc.startup(); }); </script> </head> <body class="tundra">
</body> </html></source>
Five spots of BorderLayout
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dojo.parser"); </script> </head> <body class="tundra">
top
center
bottom
left
right
</body> </html></source>
Setup border container
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dojo.parser"); </script> </head> <body class="tundra">
top
center
bottom
</body> </html></source>
Use code to border layout tags
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dojo.parser"); dojo.addOnLoad(function( ) { var bc = new dijit.layout.BorderContainer( { design: "headline", style: "height:500px;width:500px;border:solid 3px" }, "bc" ); var topContentPane = new dijit.layout.ContentPane( { region: "top", style: "background-color:#f21;height:100px;", splitter: true, minSize : 10, maxSize : 100 }, document.createElement("div") ); var centerContentPane = new dijit.layout.ContentPane( { region: "center" }, document.createElement("div") ); var bottomContentPane = new dijit.layout.ContentPane( { region: "bottom", style: "background-color:red;height:100px;", splitter: true }, document.createElement("div") ); bc.startup(); bc.addChild(topContentPane); bc.addChild(centerContentPane); bc.addChild(bottomContentPane); }); </script> </head> <body class="tundra">
</body> </html></source>