dojo学习笔记(六)- ContentPane
来源:互联网 发布:百度的石榴算法 编辑:程序博客网 时间:2024/05/16 14:17
实现功能:在一个容器里点击一个链接,在另外一个容器中显示这个链接所指向页面的内容。
<html>
<head>
<script src="./dojo/dojo.js">
</script>
<script>
dojo.require("dojo.widget.ContentPane");
var links = null, display = null;
dojo.addOnLoad(init);
function init(){
links = dojo.widget.byId("links");
display = dojo.widget.byId("display");
// listen to links domNode for onclick event
// lowercased on all DOM events as opposed to widget events
//"onclick",必须是小写的
dojo.event.connect(links.domNode, "onclick", 'relayClicks');
}
// finds out if this is a link event
function relayClicks(evt){
var node = evt.target;//取得事件源
if(node.nodeName.toLowerCase() == "a"){
// it is a link, prevent the browser from unloading the page
evt.preventDefault();
// change page in display pane
display.setUrl(node.href);
}
}
</script>
</head>
<body>
<h1>Example on how to easily relay <a href="someurl.html" target="display"> clicks</h1>
<div dojoType="ContentPane"
widgetId="links"
style="float:left ; width: 200px; height: 400px; border: 1px solid red;"
>
<a href="link1.html">Link 1</a><br/>
<a href="link2.html">Link 2</a><br/>
<a href="link3.html">Link 3</a><br/>
</div>
<div dojoType="ContentPane"
widgetId="display" name="display" id ="display"
style="width: 600px; height: 400px; border: 1px solid blue;"
></div>
</body>
</html>
<html>
<head>
<script src="./dojo/dojo.js">
</script>
<script>
dojo.require("dojo.widget.ContentPane");
var links = null, display = null;
dojo.addOnLoad(init);
function init(){
links = dojo.widget.byId("links");
display = dojo.widget.byId("display");
// listen to links domNode for onclick event
// lowercased on all DOM events as opposed to widget events
//"onclick",必须是小写的
dojo.event.connect(links.domNode, "onclick", 'relayClicks');
}
// finds out if this is a link event
function relayClicks(evt){
var node = evt.target;//取得事件源
if(node.nodeName.toLowerCase() == "a"){
// it is a link, prevent the browser from unloading the page
evt.preventDefault();
// change page in display pane
display.setUrl(node.href);
}
}
</script>
</head>
<body>
<h1>Example on how to easily relay <a href="someurl.html" target="display"> clicks</h1>
<div dojoType="ContentPane"
widgetId="links"
style="float:left ; width: 200px; height: 400px; border: 1px solid red;"
>
<a href="link1.html">Link 1</a><br/>
<a href="link2.html">Link 2</a><br/>
<a href="link3.html">Link 3</a><br/>
</div>
<div dojoType="ContentPane"
widgetId="display" name="display" id ="display"
style="width: 600px; height: 400px; border: 1px solid blue;"
></div>
</body>
</html>
- dojo学习笔记(六)- ContentPane
- dojo学习笔记(六)- ContentPane
- dojo中AccordionContainer(手风琴)动态添加ContentPane
- dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO)
- dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO)
- dojo学习笔记(三)
- dojo学习笔记(四)
- dojo学习笔记(三)
- dojo学习笔记(四)
- dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras
- dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras
- Dojo学习笔记入门篇(一)----First Dojo Example
- Dojo学习笔记(五)-djConfig详解
- Dojo学习笔记(五)-djConfig详解
- ArcGIS Javascript学习笔记(三) Dojo
- Dojo学习笔记
- Dojo学习笔记
- Dojo学习笔记
- DataView如何绑定WebService返回的主从表数据集
- 偷听北京:无意而真实的片段(3)
- webInject中文手册
- 如何查看红帽是AS几
- 如何向线程传递参数
- dojo学习笔记(六)- ContentPane
- socket编程原理(一)
- 进程间通信: 管道
- Vista 与 Solaris10 共同存在的一种方法--手动grub
- C++ Global(static) Object - Problems
- 中国九大禁菜,你敢吃几个,真受不了
- 如何安装iso文件的软件
- dataAdapter的TableMappings属性在开发中有什么用?
- socket编程原理(二)