使用 Dojo 提供的灵活多样的布局方式

　2010-08-06 00:00:00　来源：WEB开发网　　　

核心提示： 清单 6. ContentPane: placeAt() 方法示例…myContentPane.placeAt("OuterContentPane","first");…该例子中，myContentPane 将被嵌套放入 Out

清单 6. ContentPane: placeAt() 方法示例

…　　myContentPane.placeAt("OuterContentPane",　"first");　 …　

该例子中，myContentPane 将被嵌套放入 OuterContentPane 的第一个位置。

attr() – function

attr 是常用的 dojo 控件通用方法。该方法在前面的例子已经出现过了，用于为 dojo 控件的属性赋值。如：_Widget.attr(“value”, 3) 相当于 _Widget.setValue(3)。在新的版本中，许多用于修改属性的方法被不推荐了，如 setValue, setHref 等，均由 attr(“value”, value), attr(“href”, href) 方法取代。

ContentPane 还支持 dojo 事件响应机制，用 connect 方法链接 dojo 控件，事件，与事件处理方法。ContentPane 中定义的很多事件需要与其他布局容器结合才能显示效果，如在 TabContainer 中，可以加上对 ContentPane 的 onClose, onShow, onHide 等事件响应。

在这里，先给出一个事件响应的例子：

清单 7. ContentPane: 事件响应示例

…　　dojo.connect(myContentPane,　"onClick",　function(event){alert(“Click　me!”);});　 …　

TitlePane (dijit.TitlePane)

TitlePane 本质上仍然是一个 ContentPane, 不同点是，TitlePane 自带了 Title 的显示。在 TitlePane 中，title 属性定义了显示的标题。显示效果如图所示：

图 6. TitlePane 示例

清单 8. TitlePane: 基本示例

…　　<script　type="text/javascript">　　dojo.require("dijit.TitlePane");　　dojo.addOnLoad(function(){　　var　myTp=　dojo.byId("myTitlePane");　　　　　var　otherTP　=　new　dijit.TitlePane({content:"Hello　World!",　　title:"test　placeAt",closable:false});　　otherTP.placeAt("last","before");　　otherTP.startup();　　});　　</script>　　<body　class="soria">　　<div　dojoType="dijit.TitlePane"　id="myTitlePane"　title="A　Title　Pane">　　Hello　World!　First　Line.　　<p　id="last">Hello　World!　Last　Line.</p>　　</div>　　</body>　