在上一篇 使用Dojo和JSON构建Ajax应用 中,我初步介绍了一下Dojo和JSON,并提供了简单的例子。在这篇文章中,将涉及到Dojo的高级运用之一,利用Dojo的高可扩展性框架来制作widget。在某种意义上来说,widget的模块化开发可以大大的简化我们的工作。 本篇文章的讲到的例子叫做Autocompletion,一个类似于google搜索输入框的例子。这个Widget将侦测用户的键盘输入事件,并提供一个List供用户去选择可能要输入的内容。
js 代码
如果要通过JavaScript访问界面上其他性质的元素,可以遍历this.domNode直到我们找到目标UI元素。另外,我们可以通过dojoAttachPoint属性:
xml 代码
如果这段代码嵌入在了一个HTML中,那么我们可以直接在相关的JavaScript中使用this.myTextField来访问这个UI元素(注意,是HTML对象,并非此对象的值)。
js 代码
此外,我们也可以模仿上面属性访问的方式:
xml 代码
js 代码
例子中的代码是JavaScript类AutoComplete,这个js也是这个Widget例子的核心。 当我们定义一个Widget的时候,Dojo需要通过dojo.provide()方法显式的标志这个类;另外,我们在最后通过dojo.inherits()方法来定义此JavaScript类的继承,在js代码的最前端用 dojo.widget.HtmlWidget.call(this)来触发实现这个继承;此外,还有来自于父类的this.templatePath属性,this.postCreate()方法都应该注意到。 在上面的例子中,我们用到了addParseTreeHandler("dojo:AutoComplete") 来标志我们在HTML中对该Widget的引用,那在我们的页面中,应该如此调用这个Widget:
xml 代码
这段页面代码输出AutoComplete htmltemplate中的页面到浏览器,所有在这段tag中的属性都是直接对应后台js中的this."attribute"的。 本章和 使用Dojo和JSON构建Ajax应用 中涉及到的代码:dojo_json.rar |
Dojo的高级运用:Widget的制作
最新推荐文章于 2021-02-03 17:10:06 发布