Mon, 05/14/2007 - 13:54 — criecke
<
script
type
="text/javascript"
>
...
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.util.parser");
</
script
>
...
<
div
dojoType
="dijit.layout.ContentPane"
>
Lorem ipsum dolor...
</
div
>
<
div
dojoType
="dijit.Tree"
store
="popStore"
query
="{type:'category'}"
labelAttr
="name"
typeAttr
="type"
></
div
>
<
script
type
="text/javascript"
>
...
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Tree");
dojo.require("dijit.util.parser");
</
script
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
div
preload
="true"
dojoType
="dijit.layout.ContentPane"
class
="box"
href
="tree.html"
>
This text be replaced with the tree
</
div
>
内容部件( Content Pane)是最基本的布局部分(layout tile)。概念上,就象是MyYahoo portals的内容框。 内容部件就象iframe,但包括了其他的设计特点,适应当前的主题,已经提供了合适的部件。
你可以单独使用内容部件,但通常你可以把它放在一个布局容器中。例如,在一个tab部件中,内容部件用来包含tab中的内容信息。
例子
简单的内容部件,内容在tag中。大多数情况下,内容部件是用在部件容器中,所以这个例子太简单了。
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
连接内容部件(Linked content panes)即使没有容器也非常有用,如果下面是一个tree.html:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
你可以在页面上包含这个页面。因为树需要比较长的时间加载,我们给使用者显示加载信息。
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
注意树的dojo.require是放在调用的html中。脚本标签和 Javascript在被包含页面中会被忽略。
Dijit类型,属性,事件和方法
dijit.layout.ContentPane
处理文档片段替代方式,用文本初始化部件
| |||
属性
| |||
handler | String||Function | - | 通过java proxy函数来产生窗格(Pane)内容。 |
href | String | None, uses body of tag for content | 内容的 href现在显示。必须符合XHR规则,比如:URL必须在同一台server上。如果你想通过外部的方式装载数据,就必须在构建的时候,在建立部件后改变href属性没有任何效果,需要用setUrl方法。 |
loadingMessage | String | Loading... | 下载时显示的信息。需要设置href属性 |
preload | Boolean | false | 强制装载数据(即使窗格是隐藏的)注意为了延迟下载,你需要在节点初始化的时候就隐藏节点。 |
refreshOnShow | Boolean | false | 当窗格从隐藏到显示的时候,刷新(重新下载)内容 |
方法
| |||
setContent(/*String||DomNode*/ content) | 用新的数据内容替换旧的内容,包括旧内容中的style classes | ||
setUrl(/*String||dojo.uri.Uri*/ url) | 重置窗格内容(外部定义),用新url替换。 |