dojo layout
发布时间:2020-12-16 21:38:02 所属栏目:百科 来源:网络整理
导读:http://dojotoolkit.org/reference-guide/1.8/dijit/layout.html 效果: 核心代码: div data-dojo-type="BorderContainer" style="width: 100%; height: 100%;" div data-dojo-type="ContentPane" data-dojo-props="region:'top'"Top pane/div div data-doj
http://dojotoolkit.org/reference-guide/1.8/dijit/layout.html 效果:
核心代码: <div data-dojo-type="BorderContainer" style="width: 100%; height: 100%;"> <div data-dojo-type="ContentPane" data-dojo-props="region:'top'">Top pane</div> <div data-dojo-type="AccordionContainer" data-dojo-props="region:'leading'"> <div data-dojo-type="AccordionPane" title="pane #1">accordion pane #1</div> <div data-dojo-type="AccordionPane" title="pane #2">accordion pane #2</div> <div data-dojo-type="AccordionPane" title="pane #3">accordion pane #3</div> </div> <div data-dojo-type="TabContainer" data-dojo-props="region:'center'"> <div data-dojo-type="ContentPane" title="tab #1">tab pane #1</div> <div data-dojo-type="ContentPane" title="tab #2">tab pane #2</div> <div data-dojo-type="ContentPane" title="tab #3">tab pane #3</div> </div> <div data-dojo-type="ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div> <div data-dojo-type="ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div> </div> 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> html,body { width: 100%; height: 100%; margin: 0; } </style> <script type="text/javascript" src="js/dojo/dojo.js" data-dojo-config="parSEOnLoad:true"> </script> <link rel="stylesheet" href="js/dijit/themes/claro/claro.css" /> <script type="text/javascript"> require(["dojo/parser","dijit/layout/BorderContainer","dijit/layout/TabContainer","dijit/layout/AccordionContainer","dijit/layout/ContentPane","dijit/layout/AccordionPane"]); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div> <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'leading'"> <div data-dojo-type="dijit/layout/AccordionPane" title="pane #1">accordion pane #1</div> <div data-dojo-type="dijit/layout/AccordionPane" title="pane #2">accordion pane #2</div> <div data-dojo-type="dijit/layout/AccordionPane" title="pane #3">accordion pane #3</div> </div> <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'"> <div data-dojo-type="dijit/layout/ContentPane" title="tab #1">tab pane #1</div> <div data-dojo-type="dijit/layout/ContentPane" title="tab #2">tab pane #2</div> <div data-dojo-type="dijit/layout/ContentPane" title="tab #3">tab pane #3</div> </div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div> </div> </body> </html> 效果: 代码: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |