`
子衿青青
  • 浏览: 110413 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

认识Dojo中的界面控件:Dijit

 
阅读更多

Dojo框架区别于其他Ajax框架的一个显著特征就是它的界面控件系统:Dijit。Dijit是Dojo中界面控件的总称,他们使用灵活而且易于理解。每个Dijit控件都是由Dojo类以及控件中使用的图片,CSS等资源文件共同组成。通过Dijit架构,可以方便的创建灵活、可扩展、可定制外观的控件。下面将逐步介绍如何创建、配置Dijit控件,从而将其用在自己的web应用中。

Dijit控件概览

开始使用Dijit:引入需要的类和资源

前面提到Dijit的组成中除了Dojo类,还有图片和CSS。这些外观是通过Dojo框架的主题来提供的,Dojo包含了4个主题,分别是:nihilo, soria, tundra和claro,其中claro是最新的Dojo1.5新增加的一个外观主题。每个主题中都包含了用于定义控件外观的css和图片文件。因此,为了使用某一个主题,我们首先需要将其导入到Web页面中:

当然,这个地址你也可以用你自己的: @import "dojoroot/dijit/themes/tundra/tundra.css";

你可以用Dijit的主题查看器 来查看每个主题的外观,本地也可以访问到这个主题查看器:<dojoroot>/dijit/themes/themeTester.html,你也可以定义自己的主题。

除了引入样式文件,当然还要引入Dojo核心本身,和其他类库一样,需要引入一个js文件。但Dojo中可以在引用js文件的同时对其进行参数配置。这里有一个比较重要的就是parseOnLoad参数。这个参数使得在页面载入完成之后自动解析页面上的所有Dijit控件。因此,引入Dojo核心库的代码如下:


同理,这里的dojo.js文件你也可以直接使用本地文件。

引入Dojo核心之后,你还需要引入你所用到的控件的代码文件,这是通过dojo.require语句完成的。例如,你需要在页面上使用一个按钮控件:dijit.form.Button,那么你就需要在页面载入的最开始加入:dojo.require('dijit.form.Button')。这个和java的import语句或者.net中using语句的作用是类似的。

准备工作完成之后,下面我们来看如何使用dojo控件。

创建Dijit的两种方式

在Dojo中创建Dijit可以有两种方式,这也是Dijit系统最显著的特性之一:

  1. 通过HTML标记以声明方式创建
  2. 通过javascript程序动态创建


例如,一个基本的下拉框通过如下HTML表示:



这是一个包括多个选项的静态下拉框,那么现在我们想让其支持实时过滤:即下拉框选项会根据你输入的关键字被过滤,缩小选项范围。在Dijit中有相应的控件来实现这个特性:dijit.form.FilteringSelect. 因此,我们首先需要引入这个控件:



引入控件之后,我们很容易将一个静态的下拉框转变为Dijit控件。

通过声明方式创建Dijit

这种方式直接在原来的Html标记里加上Dijit相关的属性:



这是用声明方式来创建dijit的一个简单例子,dojoType属性告诉dojo一个给定的元素需要转换为哪个dijit。前面我们已经提到在引入Dojo核心库时可以对其进行一些参数设置,parseOnLoad就是这样一个配置属性,设为true之后,Dojo就会在页面载入完成之后立刻寻找所有带有dojoType属性的节点,并将其转换为相应的Dijit控件。

在下拉框这个例子中,所有静态声明出来的选项(option)都会被新的FilteringSelect识别,除此之外,还可以在声明的时候对dijit的一些参数进行配置,例如:autoComplete = "true"就设置了自动完成功能,pageSize = "10"设置了每页最多显示10个结果。

由此可见,FilteringSelect功能是在原有的select功能基础上增加了新的功能。但没有改变它是一个下拉框的本质。

通过编程方式创建Dijit

编程的方式就是通过javascript代码来创建Dijit控件。下面的代码创建了dojo中自带的一些常用表单元素:

可以看到,创建一个dijit需要两个参数:
第一个参数是一个javascript对象,这个对象的每一个属性都将成为要创建的dijit的属性。
第二个参数指定了dom节点,可以是节点id也可以是实际的节点。这就指定了要创建的dijit在页面的位置。如果不指定此参数,那么会自动创建一个独立dom节点来对应这个dijit,由开发者决定何时将其加入到页面的什么位置。

注意,这里编程的方式创建就和parseOnLoad属性没关系了,无论设为true或者false,都会按照程序逻辑创建需要的Dijit控件。

有时你需要创建一个包含许多元素的大表单,但又不想一个个创建,那么下面的方式可以让你用css3选择器指定节点,并将这些节点统一转换为Dijit控件,这是另外一种对标准Html进行Dijit化的方法,同时结合了静态声明和动态创建。这是通过dojo.behavior工具类来完成的:


当然,你也可以直接通过dojo.query查找到需要的元素,再手动创建这些节点,这个和上面的代码可以实现同样的功能,但dojo.behavior提供了更简洁的语法。

下图显示了创建的表单:

Dijit表单

访问Dijit控件和Dijit控件的属性

要获取某一个特定dom节点,可以方便的用dojo.byId(id)方法获取。Dijit也提供了类似的方法,dijit.byId(id)可以获取指定id的节点对应的dijit控件:如果创建Dijit控件时使用的Dom节点有id属性,那么这个id就是Dijit控件的id;如果Dom节点没有指定id,那么将会自动为Dijit控件产生一个唯一id。
例如,如果我们要应用通过声明方式创建的一个Dijit控件,而且这个Dijit控件对应的Dom节点具有id='players'这个属性,那么可以用如下代码获得这个Dijit控件的引用:


可以通过Firebug查看Dijit控件的所有属性:


Dijitshuxing



如果想要获取Dijit控件的某个属性,可以用如下代码:


如果要设置Dijit控件的某个属性,可以用如下代码:


可见,attr是所有Dijit控件都有的方法,当只有一个参数时,返回参数指定属性的值,当有2个参数时,将第二个参数赋值给参数一指定的参数。
需要注意的是:dojo 1.5使用了一种新的方式来使用dijit控件的属性:get和set,这使得对dijit控件属性的访问更加直观。功能上和attr方法完全相同,分别对应单参数和双参数功能

Dijit控件的事件绑定

Dijit控件使用Dojo的connect方法来实现事件的绑定,例如:


每个Dijit控件都有多个事件,但因为javascript的特殊性,即使绑定了一个不存在的事件,也不会报错。因此,我们需要在使用事件之前查找API文档,以确保他们的存在。

Dijit控件集

Dijit是一个非常优秀的UI控件库,熟练的使用它们可以快速开发出功能强大的Ajax网站。在Dijit库中有大量的功能稳定的控件:

  • 上下文菜单,弹出菜单,按钮式菜单
  • 改进的基本表单元素:按钮,下拉框,复选款,单选按钮,文本框,等等。
  • 日期和时间选择控件
  • 所见即所得富文本编辑器
  • 水平和垂直滑动块
  • 进度条
  • 选项卡、手风琴控件
  • 支持拖放功能的树结构
  • 对话框,提示框
  • 支持调整大小的布局控件

如果在基本的dijit库中没有你需要的控件,dojox(dojo扩展)是另外一个提供Dijit控件的地方,其中有更大量的控件可供选择。
如果想要查看Dijit控件的功能和样式,可以使用Dojo的主题查看器来浏览。

Dijit资源

下面的链接可以帮助你快速的学习和使用Dijit:

  1. Dijit API Documentation
  2. Dijit Reference Guide
  3. Dojo Nightlies (test files)
  4. Dijit Theme Tester


小结

本文简要介绍了Dojo中的界面系统:Dijit。将来我们会提供更深入介绍Dijit控件的文章,欢迎大家保持关注!

本文翻译自:

http://www.sitepen.com/blog/2010/07/12/dive-into-dijit/

By Nate













分享到:
评论

相关推荐

    dojo控件的使用和入门心得

    ### Dojo控件的使用和入门心得 #### Dojo简介及其优势 Dojo是一个功能强大的JavaScript框架,专门设计用于简化富互联网应用(RIA)的开发。作为一种DHTML Toolkit,Dojo封装了大量的常用功能,旨在提高前端开发...

    超多的Dojo实例应用演示源码

    3. **Dojo Dijit**:Dijit是Dojo的UI组件库,包含了大量的可复用、可主题化的用户界面元素,如按钮、表单控件、布局容器等。通过查看压缩包中的示例,你可以学习如何在实际项目中使用这些Dijits。 4. **Dojo DojoX*...

    dojo api 中文版

    其中 Dojo 是核心功能包,Dijit 中存放的是 Dojo 所有的 Widget 组件,而 DojoX 则是一些扩展或试验功能。 常用的包包括: * dojo.io:不同的 IO 传输方式,如 script 和 IFrame 等。 * dojo.dnd:拖放功能的辅助 ...

    dojo api最好资料

    由于不同的浏览器可能有不同的行为模式,Dojo通过环境相关包确保了代码能够在各种环境中稳定运行。 #### 应用程序支持库 应用程序支持库包含了大量实用API,例如网络请求、动画效果等。这一层是开发人员最频繁使用...

    dojo最新版本驱动

    3. **Dijit UI库**:Dijit是Dojo的可复用、可主题化的用户界面组件库。它包含了大量的Widget,如按钮、表单控件、布局容器等,帮助开发者快速创建复杂的前端界面。 4. **Dojo Data**:Dojo Data提供了一种统一的...

    DOJO_API_中文参考手册 附加注释实例

    - DojoX包则包含一些扩展功能和试验性质的功能,这些功能在成熟后可能会被整合到Dojo或Dijit中。 4. 常用包及其功能: - dojo.io:提供不同IO传输方式,如script、iframe等,用于Ajax调用。 - dojo.dnd:提供...

    dojo 树形列表 dijit.tree

    Dijit是Dojo Toolkit的一部分,专门提供了一系列可复用的UI控件,其中包括我们关注的“dijit.tree”,即树形列表。在本篇文章中,我们将深入探讨这五个关于dijit.tree的例子,并了解如何在实际应用中实现它们。 1. ...

    dojo guide ppt

    Dojo中的Dijit: Dijit是建立在Dojo之上的一个组件系统,提供了可替代标准HTML控件的富用户界面元素。Dijit的设计目标是简化Web 2.0 GUI的创建,即使对于不熟悉JavaScript的开发者也十分友好。使用Dijit,可以通过两...

    dojo 官方教程 中文翻译

    6. **dijit组件**:Dojo的dijit模块提供了一系列用户界面组件,如按钮、表单控件、布局容器等,这些组件具有丰富的主题和无障碍性支持。 7. **dojo/parser和声明式编程**:dojo/parser负责解析页面上的声明式标记,...

    dojo技术入门ysk

    1. **强大的组件库**:Dojo提供了大量的UI组件,这些组件可以轻松地被集成到应用程序中,帮助开发者快速构建用户界面。 2. **高性能**:通过优化的代码结构和高效的渲染机制,Dojo能够确保即使在复杂的Web应用中也能...

    DOJO API 中文参考手册,附加注解实例(精心重新排版DOC文档)

    DojoX则是一系列扩展和实验性的功能,其中的一些成熟功能可能会在后续版本中被引入到Dojo或Dijit中。手册中列举了一些常用的Dojo包,如dojo.io用于不同类型的IO传输,dojo.dnd提供拖放功能的API,dojo.string提供了...

    dojo relase

    3. **Dijit**:Dijit是Dojo的UI组件库,包含了一系列可复用的、符合Web标准的用户界面元素,如按钮、表单控件、对话框、布局容器等。Dijit组件具有良好的可访问性和国际化支持。 4. **DojoX**:除了Dijit,Dojo还有...

    学习dojo时用到的一些代码,仅供分享

    4. **dijit**: dijit是Dojo的UI组件库,包含了一系列可复用的用户界面控件,如按钮、表单元素、布局容器等。这些控件具有良好的可定制性和主题支持。 5. **dojox**: dojox是Dojo的扩展库,包含了许多非核心但有用的...

    dojoMap Demo

    【dojoMap Demo】是一个展示如何在Dojo框架中集成地图数据图表的应用示例。这个Demo是基于Dojo 1.5版本构建的,它演示了如何利用Dojo库中的功能来创建交互式地图和图表,将地理信息与数据可视化相结合。在本篇中,...

    技术基础:从头开始学习 Dojo

    3. **Dijit**:Dijit 包是 Dojo 的扩展 UI 库,包含各种用户界面组件,如对话框、日历、调色板、工具提示、树形视图,以及增强的表单控件和布局管理选项。Dijit 提供丰富的交互体验,是构建富互联网应用的关键。 4....

    最棒的AJAX框架DOJO中文手册

    Dijit是Dojo的UI组件库,包含各种可复用的、样式化的用户界面元素,如按钮、表单控件、布局组件等。Dijit组件遵循WAI-ARIA无障碍标准,确保了良好的可用性。 ### 5. Dojo DojoX DojoX是Dojo的扩展库,包含更专业或...

    dojo-release-1.3.2-docs

    Dijit是Dojo的UI组件库,包含各种可复用的用户界面元素,如按钮、表单控件、布局容器等。Dojox则是扩展库,包含额外的功能和实验性的模块。 3. **dojo.declare**:Dojo的类系统基于`dojo.declare`函数,允许开发者...

    dojo-release-1.4.0rc1-demos.zip

    2. **Dijit**:Dijit是Dojo的UI组件库,提供了一组可复用、可定制的用户界面组件,如按钮、表单控件、对话框等。在`form`相关的示例中,你将了解如何使用Dijit创建高级的表单元素,如`dijit.form.Button`、`dijit....

    dojo api 1.0 中文文档

    - **DojoX**:扩展或试验功能包,一些功能可能会在后续版本中移至 Dojo 或 Dijit 命名空间。 #### 常用包介绍 下面是 Dojo 中一些常用的包及其功能: - **dojo.io**:提供多种 IO 传输方式,如 script、IFrame 等...

    DOJO—API—中文参考手册

    DOJO1.1.1版本中提供了大量的包,这些包主要分布在三个一级命名空间中:Dojo、Dijit和DojoX。其中: - **Dojo**:包含了核心功能包。 - **Dijit**:包含了所有的Widget组件。 - **DojoX**:包含了一些扩展或试验性的...

Global site tag (gtag.js) - Google Analytics