dojo layout

最新推荐文章于 2024-08-12 09:24:46 发布

weixin_34110749

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量72

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/uniquejava/blog/113068

版权

2019独角兽企业重金招聘Python工程师标准>>>

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>

效果：

代码：

转载于:https://my.oschina.net/uniquejava/blog/113068