DOJO之SplitContainer

作者在 2008-05-16 13:48:49 发布以下内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Split Container</title>

<style type="text/css">

@import "dojo/dijit/themes/tundra/tundra.css";

@import "dojo/dojo/resources/dojo.css"

</style>

<script type="text/javascript" src="dojo/dojo/dojo.js"

djConfig="parseOnLoad: true">

</script>

<script type="text/javascript">

dojo.require("dojo.parser");

dojo.require("dijit.layout.SplitContainer");

dojo.require("dijit.layout.ContentPane");

</script>

</head>

<body class="tundra">

<div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="10" activeSizing="true" style="border: 1px solid #bfbfbf; width: 400px; height: 300px;">

<div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">

This is the left part.

</div>

<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="80">

This is the right part.

</div>

</div>

</body>

</html>
        有几个属性要注意下:
1. orientation: 两个值。"horizontal"将容器分为左右两部分,而"vertical"则分为上下两部分;
2. sizerWidth: 即中间的分隔条宽度;
3. activeSizing: 同样两个值。"true", 拖动分隔条的时候容器的两部分随着拖动一起动;"false",拖动结束后,即松开鼠标后,容器中的两部分才改变高度或宽度;
4. 要给SplitContainer通过style设置width和height。

        然后是ContentPane的几个属性:
1. sizeMin: 即该ContentPane的最小高度或宽度;
2. sizeShare: 相对于其他ContentPane的比例。例如,如果有两个ContentPane,一个该属性是20,另一个是80,那么刚加载好页面显示出来的样子,是一个ContentPane的宽度是另一个的4倍。该属性与像素大小无关,只跟彼此的比例有关系。

DOJO | 阅读 4114 次
文章评论,共0条
游客请输入验证码