Dojo中创建widget方式小结

最新推荐文章于 2017-02-21 16:07:50 发布

孙群

最新推荐文章于 2017-02-21 16:07:50 发布

阅读量3.6k

点赞数 1

分类专栏： Web 文章标签： dojo function button 编程 firefox

本文链接：https://blog.csdn.net/iispring/article/details/7554864

版权

Web 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

dojo中创建widget的方式总的来说有两种：声明式创建widget、编程式创建widget。编程式创建widget根据srcNode又可分为三种：静态srcNode、动态srcNode、无srcNode。

1. 声明式创建widget，通过在宿主节点上设置dojoType="widgetName"来实现，代码如下所示：

<html>
<head>
	<title>声明式的widget</title>
	<style type="text/css">
		@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
	</style>
	<script type="text/javascript">
		var djConfig={parseOnLoad:true};
	</script>
	<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
	<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit._Widget");
		dojo.declare("Counter",[dijit._Widget],{
			_i:0,
			buildRendering:function(){
				this.domNode=dojo.create("button",{innerHTML:this._i});
			},
			postCreate:function(){
				this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法
			},
			increment:function(){
				this.domNode.innerHTML = ++this._i;
			}
		});
	</script>
</head>
<body>	
	<span dojoType="Counter"></span>
	<!--此处的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。
	在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span。-->
</body>
</html>

2.使用静态的scrNode供编程式的widget定位使用，代码如下所示：

<html>
<head>
	<title>使用静态的scrNode供编程式的widget定位使用</title>
	<style type="text/css">
		@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
	</style>
	<script type="text/javascript">
		var djConfig={parseOnLoad:true};
	</script>
	<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
	<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit._Widget");
		dojo.declare("Counter",[dijit._Widget],{
			_i:0,
			buildRendering:function(){
				this.domNode=dojo.create("button",{innerHTML:this._i});
			},
			postCreate:function(){
				this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法
			},
			increment:function(){
				this.domNode.innerHTML = ++this._i;
			}
		});
		
		dojo.addOnLoad(function(){
			var srcNode = dojo.byId("srcNodeId");
			var counterWidget = new Counter({},srcNode);// new WidgetName({widget属性散列},srcNode}
			
		});		
	</script>
</head>
<body>	
	<span id="srcNodeId"></span>
	<!--此处的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。
	在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span。-->
</body>
</html>

3.动态创建scrNode供编程式的widget定位使用，代码如下所示：

<html>
<head>
	<title>动态创建scrNode供编程式的widget定位使用</title>
	<style type="text/css">
		@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
	</style>
	<script type="text/javascript">
		var djConfig={parseOnLoad:true};
	</script>
	<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
	<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit._Widget");
		dojo.declare("Counter",[dijit._Widget],{
			_i:0,
			buildRendering:function(){
				this.domNode=dojo.create("button",{innerHTML:this._i});
			},
			postCreate:function(){
				this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法
			},
			increment:function(){
				this.domNode.innerHTML = ++this._i;
			}
		});
		
		dojo.addOnLoad(function(){
			var srcNode = dojo.create("span");//dojo.create("elementTagName",{DOM属性散列})
			dojo.body().appendChild(srcNode);
			var counterWidget = new Counter({},srcNode);// new WidgetName({widget属性散列},srcNode}
			/*此处动态创建的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。
			在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span*/
		});		
	</script>
</head>
<body>	
	
</body>
</html>

4.编程式创建widget，不设置小部件的srcNode，代码如下所示：

<html>
<head>
	<title>编程式创建widget，不设置小部件的srcNode</title>
	<style type="text/css">
		@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
	</style>
	<script type="text/javascript">
		var djConfig={parseOnLoad:true};
	</script>
	<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
	<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit._Widget");
		dojo.declare("Counter",[dijit._Widget],{
			_i:0,
			buildRendering:function(){
				this.domNode=dojo.create("button",{innerHTML:this._i});
			},
			postCreate:function(){
				this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法
			},
			increment:function(){
				this.domNode.innerHTML = ++this._i;
			}
		});
		
		dojo.addOnLoad(function(){
			var counterWidget = new Counter({});// new WidgetName({widget属性散列},srcNode}
			counterWidget.placeAt(dojo.body());
			//placeAt是dijit._Widget中的函数，将创建的widget放到了body中，而且没有使用srcNode
		});		
	</script>
</head>
<body>	
	
</body>
</html>

以上前三种都是用了srcNode进行定位，需要特别注意的是,srcNode仅仅是用来进行对widget进行定位，千万不要将widget.domNode与srcNode等价起来，二者不同，widget.domNode是widget自身的dom节点，而srcNode只是相当于widget的占位符。但也并不是所有的小部件都必须创建“替代层”。一些小部件，其在页面中的位置对其功能没有任何影响。例如dijit.Tooltip、dijit.TooltipDialog与dijit.Dialog等。因为这类型的小部件的显示位置与其在DOM结构中的相对位置没有必然的关系，因此在一般情况下，Dojo会默认把这些小部件插入到页面DOM结构最后面的位置。