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。

相关文章

【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
内核启动时减少log的方式

内核启动时减少log的方式

内核引导选项 内核引导选项大体上可以分为两类：一类与设备无关、另一类与设备有关。与设备有关的引导选项多如牛毛，需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导选项。比如，如果你想知道可以向 AHA1542 SCSI 驱动程序传递哪些引导选项，那么就查看 drivers/scsi/aha1542.c 文件，一般在前面 100 行注释里就可以找到所接受的引导选项说明。大多数选项是通过"_
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
用命令行的方式启动.netcore webapi

用命令行的方式启动.netcore webapi

用命令行的方式启动.netcore web项目 进入指定的项目文件夹，比如我发布后的代码放在下面文件夹中 在此地址栏中输入“cmd”，打开命令提示符，进入到发布代码目录 命令行启动.netcore项目的命令为:  dotnet 项目启动文件.dll --urls="http://*:对外端口" --ip="本机ip" --port=项目内部端口 例： dotnet Imagine.M
阅读更多...
顺序表之创建，判满，插入，输出

顺序表之创建，判满，插入，输出

文章目录 🍊自我介绍🍊创建一个空的顺序表，为结构体在堆区分配空间🍊插入数据🍊输出数据🍊判断顺序表是否满了，满了返回值1，否则返回0🍊main函数 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以：点赞+关注+评论+收藏（一键四连）哦~ 🍊自我介绍   Hello,大家好，我是小珑也要变强（也是小珑），我是易编程·终身成长社群的一名“创始团队·嘉宾”
阅读更多...
深入理解RxJava：响应式编程的现代方式

深入理解RxJava：响应式编程的现代方式

在当今的软件开发世界中，异步编程和事件驱动的架构变得越来越重要。RxJava，作为响应式编程（Reactive Programming）的一个流行库，为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava？💯 响应式编程的优势💯 RxJava的核心概念
阅读更多...
【即时通讯】轮询方式实现

【即时通讯】轮询方式实现

技术栈 LayUI、jQuery实现前端效果。django4.2、django-ninja实现后端接口。 代码仓 - 后端 代码仓 - 前端 实现功能 首次访问页面并发送消息时需要设置昵称发送内容为空时要提示用户不能发送空消息前端定时获取消息，然后展示在页面上。 效果展示 首次发送需要设置昵称 发送消息与消息展示 提示用户不能发送空消息 后端接口 发送消息 DB = []@ro
阅读更多...
Maven创建项目中的groupId, artifactId, 和 version的意思

Maven创建项目中的groupId, artifactId, 和 version的意思

文章目录 groupIdartifactIdversionname groupId 定义：groupId 是 Maven 项目坐标的第一个部分，它通常表示项目的组织或公司的域名反转写法。例如，如果你为公司 example.com 开发软件，groupId 可能是 com.example。作用：groupId 被用来组织和分组相关的 Maven artifacts，这样可以避免
阅读更多...
脏页的标记方式详解

脏页的标记方式详解

脏页的标记方式 一、引言 在数据库系统中，脏页是指那些被修改过但还未写入磁盘的数据页。为了有效地管理这些脏页并确保数据的一致性，数据库需要对脏页进行标记。了解脏页的标记方式对于理解数据库的内部工作机制和优化性能至关重要。 二、脏页产生的过程 当数据库中的数据被修改时，这些修改首先会在内存中的缓冲池（Buffer Pool）中进行。例如，执行一条 UPDATE 语句修改了某一行数据，对应的缓
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2