Dojo中创建widget方式小结

2024-02-19 19:32
文章标签 创建 方式 小结 dojo widget

本文主要是介绍Dojo中创建widget方式小结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  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结构最后面的位置。

这篇关于Dojo中创建widget方式小结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/725720。

相关文章

Mybatis的分页实现方式

Mybatis的分页实现方式

《Mybatis的分页实现方式》MyBatis的分页实现方式主要有以下几种,每种方式适用于不同的场景,且在性能、灵活性和代码侵入性上有所差异,对Mybatis的分页实现方式感兴趣的朋友一起看看吧... 目录​1. 原生 SQL 分页（物理分页）​​2. RowBounds 分页（逻辑分页）​​3. Page
阅读更多...
Java中实现线程的创建和启动的方法

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程（调用start()方法）而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st
阅读更多...
Linux链表操作方式

Linux链表操作方式

《Linux链表操作方式》：本文主要介绍Linux链表操作方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、链表基础概念与内核链表优势二、内核链表结构与宏解析三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势六、典型应用场景七、调试技巧与
阅读更多...
Linux实现线程同步的多种方式汇总

Linux实现线程同步的多种方式汇总

《Linux实现线程同步的多种方式汇总》本文详细介绍了Linux下线程同步的多种方法,包括互斥锁、自旋锁、信号量以及它们的使用示例,通过这些同步机制,可以解决线程安全问题,防止资源竞争导致的错误,示例... 目录什么是线程同步？一、互斥锁（单人洗手间规则）适用场景：特点：二、条件变量（咖啡厅取餐系统）工作流
阅读更多...
RedisTemplate默认序列化方式显示中文乱码的解决

RedisTemplate默认序列化方式显示中文乱码的解决

《RedisTemplate默认序列化方式显示中文乱码的解决》本文主要介绍了SpringDataRedis默认使用JdkSerializationRedisSerializer导致数据乱码,文中通过示... 目录1. 问题原因2. 解决方案3. 配置类示例4. 配置说明5. 使用示例6. 验证存储结果7.
阅读更多...
Python程序打包exe,单文件和多文件方式

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》：本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一（适用于文件较少的程
阅读更多...
Macos创建python虚拟环境的详细步骤教学

Macos创建python虚拟环境的详细步骤教学

《Macos创建python虚拟环境的详细步骤教学》在macOS上创建Python虚拟环境主要通过Python内置的venv模块实现,也可使用第三方工具如virtualenv,下面小编来和大家简单聊聊... 目录一、使用 python 内置 venv 模块（推荐）二、使用 virtualenv（兼容旧版 P
阅读更多...
Python验证码识别方式(使用pytesseract库)

Python验证码识别方式(使用pytesseract库)

《Python验证码识别方式(使用pytesseract库)》：本文主要介绍Python验证码识别方式(使用pytesseract库),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全... 目录1、安装Tesseract-OCR2、在python中使用3、本地图片识别4、结合playwrigh
阅读更多...
Spring中管理bean对象的方式(专业级说明)

Spring中管理bean对象的方式(专业级说明)

《Spring中管理bean对象的方式(专业级说明)》在Spring框架中,Bean的管理是核心功能,主要通过IoC（控制反转）容器实现,下面给大家介绍Spring中管理bean对象的方式,感兴趣的朋... 目录1.Bean的声明与注册1.1 基于XML配置1.2 基于注解（主流方式）1.3 基于Java
阅读更多...
windows系统上如何进行maven安装和配置方式

windows系统上如何进行maven安装和配置方式

《windows系统上如何进行maven安装和配置方式》：本文主要介绍windows系统上如何进行maven安装和配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录1. Maven 简介2. maven的下载与安装2.1 下载 Maven2.2 Maven安装2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2