dijit_使用Dijit组件框架创建丰富的用户界面

dijit

什么是Dijit?

发展有关此主题的技能

此内容是用于提高技能的渐进知识路径的一部分。 请参阅Dojo开发入门

Dijit是Dojo Toolkit的丰富组件的用户界面库。 这些组件完全可以主题化,可以使用HTML样式的标签进行声明,也可以使用JavaScript进行编程。 本节简要介绍了Dijit,介绍了Dijit必须提供的组件,并介绍了现成的各种主题。

丰富的用户界面组件

Dijit的主要功能是它提供的丰富的用户界面组件套件。 大多数Web应用程序开发人员都会非常熟悉基本HTML元素和表单组件的局限性,以及使用诸如<div>和CSS规则之类的元素布局应用程序时遇到的困难。 这是Dijit真正有用的地方。 它提供了一系列在HTML中不可用的组件(当然,无需您自己编写),包括:

  • 日历
  • 色彩调色板
  • 对话框(模态或非模态)
  • 富文本编辑器
  • 内联编辑器
  • 菜单栏和上下文菜单
  • 进度条
  • 手风琴和面板
  • 工具栏
  • 工具提示
  • 树木

除了上一个列表之外,DojoX扩展库还具有一系列其他组件,包括网格,图表,视频播放器,灯箱等。 图1提供了许多Dijit组件的示例,包括按钮,对话框,选项卡容器,日历,调色板,菜单,RTF编辑器和进度条。

图1.运行中的Dijit组件
具有3个选项卡,一个调色板,一个文本编辑部分和一个日历的Digit窗口。

除UI组件外,Dijit还提供了一系列改进的表单字段,与常规HTML表单元素相比,它们提供了更多的灵活性和功能。 这些表单控件包括:

  • 用于特定数据格式的各种文本框控件,包括货币,日期,数字和时间
  • 数字微调器
  • 自动扩展文字区域
  • 自动补全组合框
  • 多选列表框
  • 带有下拉菜单的按钮
  • 切换按钮(打开/关闭)
  • 滑杆

图2显示了其中的某些表单控件。

图2. Dijit表单控件的作用
带有日历,滑块,单选按钮和复选框的注册表。

Dijit还包括各种布局组件,这些组件使组织Web应用程序的布局变得轻而易举。 Dijit让您不再为表格或CSS浮动所困扰,可以为应用程序布局定义复杂的结构。 Dijit提供的布局组件包括:

  • 手风琴容器
  • 堆栈容器
  • 边境集装箱
  • 标签容器
  • 内容窗格

如您所见,Dijit具有丰富的用户界面组件,开发人员通常需要很长时间才能编写自己的代码。 使用Dijit,您可以减少应用程序的开发时间,因为您不必担心设计或开发复杂的用户界面组件。

主题化

在上一节中,您看到了Dijit用户界面组件的一些示例,所有示例均使用Dijit随附的“ Claro”主题。 Dijit还包括其他一些现成的主题,使您有更多的余地将Dijit组件适合您的应用程序样式。 图3展示了其他正在执行的Dijit主题的示例。

图3. Tundra,Soria和Nihilo主题
带有3个面板的相同Dijit窗口,每个面板都有一些不同的样式。

如果Dijit随附的主题不适合您的应用程序,则可以轻松定义自己的主题,并根据您的确切要求自定义Dijit的所有组件。 创建Dijit主题可以证明其完整的文章合理性,并且在Dojo工具箱文档中对此进行了详细介绍。 请参阅相关信息中的链接到Dojo文档的主题化部分。

Dijit入门

要创建Dijit应用程序,您需要包括Dojo库本身,正在使用的主题CSS文件以及在HTML文档的body元素上对主题选择的引用。 然后,使用dojo.require函数加载要包含在应用程序中的Dijit组件。

让我们从使用Claro主题的Dijit应用程序的基本模板开始。 就本文而言,我假设您是从Google Content Delivery Network(CDN)而不是您自己的服务器或计算机上加载Dojo。 打开您喜欢的文本编辑器,并将清单1的内容添加到其中。

清单1.基本的Dijit模板
<!doctype html>
<html lang="en" dir="ltr">
    <head>
        <title>Dijit Template</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs
/dojo/1.5/dijit/themes/claro/claro.css" />
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
    </head>
    <body class="claro">
        <!-- HTML content here -->
        <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
        <script>
            dojo.require("dijit.dijit");
            //Add Dijit components you are using here using dojo.require
	
            dojo.addOnLoad(function() {		
                //JavaScript content here
            });
        </script>
    </body>
</html>

如清单1所示, claro.css样式表是从Google CDN加载的。 同样,为您的<body>元素提供一个与您正在使用的主题名称相匹配的类名称也很重要。 在这种情况下,我使用的是Claro主题,因此我给了类名称claro 。 您可能会认为,要包含Dijit,除了基本的Dojo工具包之外,还需要包含一系列JavaScript文件。 不是这种情况; 您可以使用dojo的加载系统通过dojo.require动态加载所需的Dijit框架的元素。 但是,我添加的一件事是<script>标记的djConfig="parseOnLoad: true"属性,该标记加载Dojo。 这基本上告诉Dojo应该使用其HTML解析器来查找具有属性dojoType HTML元素。 您将在下一部分中看到更多有关此的信息。 最后,在主应用程序脚本中,我为"dijit.dijit"添加了一个dojo.require声明,该声明优化了Dijit的加载。 定义了模板之后,您就可以在应用程序中使用Dijit组件了。

有两种在应用程序中使用Dijit组件的方法。 第一种方法是声明式添加组件。 这意味着向页面添加使用dojoType属性指示组件应由Dojo解析并呈现为Dijit组件HTML元素。 您将在下一部分中看到它的工作原理。 添加组件的另一种方法是使用JavaScript以编程方式定义组件。 您很快就会看到更多有关此的信息。

声明地与Dijit合作

Dijit提供的一项非常有用的功能(在大多数其他主要JavaScript组件库中不可用)是一种以声明性方式使用小部件的方法,即使用常规HTML元素。 这样做的明显好处是,您可以像在Web应用程序中所期望的那样,使用HTML语法设计应用程序,从而使应用程序逻辑在JavaScript中保持独立。

以这种方式使用Dijit非常简单。 让我们看一下创建日历组件的示例。 首先,在模板的<body>部分中,找到注释<!-- HTML content here --> ,并将其替换为以下行: <div dojoType="dijit._Calendar"></div>

接下来,在dojo.require("dijit.dijit");行下面dojo.require("dijit.dijit"); ,添加以下行: dojo.require("dijit._Calendar");

保存此文件并将其加载到您喜欢的Web浏览器中。 您应该会看到类似于图4中的屏幕快照的内容。

图4.运行中的Dijit日历组件
Dijit窗口显示了2010年11月的日历。

到目前为止,以这种方式声明Dijit组件是将Dojo添加到应用程序中的最简单方法。 您可以在适用的其他小部件内添加小部件(例如,可以在TitlePane中添加调色板),甚至可以以相当简单的方式将事件处理程序附加到组件。

首先,让我们将一个小部件嵌套在另一个小部件内,如上一段所述。 用清单2中的代码段替换HTML部分中的日历行。

清单2.在标题窗格中添加调色板的代码片段
<div dojoType="dijit.TitlePane" title="Color Picker">
    <div dojoType="dijit.ColorPalette"></div>
</div>

接下来,用清单3中的代码替换日历的dojo.require调用。

清单3.替换日历的dojo.require调用
dojo.require("dijit.TitlePane");
dojo.require("dijit.ColorPalette");

保存文件并重新加载Web浏览器。 您应该看到类似图5的内容。

图5.标题窗格内的调色板
标题窗格内的调色板。

如您所见,调色板显示在标题窗格组件内,并且如果您折叠标题窗格,则不会出现调色板。 现在,让我们以两种方式向调色板添加事件处理程序。 首先,使用一个内联onClick属性,当用户选择一种颜色时,该属性会显示一个带有所选值的警报窗口。 为此,请将您的dojo.ColorPalette对象HTML元素更改为以下内容: <div dojoType="dijit.ColorPalette" onChange="alert(this.value);"></div>

保存文件并将其加载到浏览器中,然后尝试单击一种颜色。 您应该看到一个警告窗口,其中显示了所选颜色的十六进制值。 内联事件处理程序适用于单行操作,但是如果您想做一些复杂的事情,它就不会那么有用。 幸运的是,您可以声明dojo/method <script>块,以将JavaScript代码添加到Dijit组件中。

用清单4中的代码替换您刚才更改的行。

清单4.运行的Dojo方法<script>块
<div dojoType="dijit.ColorPalette">
    <script type="dojo/method" event="onChange" args="evt">
         alert(this.value);
    </script>
</div>

保存文件并重新加载浏览器,您将看到它做同样的事情。 但是,这一次,您在Dijit组件HTML元素内添加了<script>块。 您给它赋予了值dojo/method ,而不是传统的text / javascript类型值,该值告诉Dojo解析器解析此代码块。 它使用event属性来定义应将此代码绑定到哪个事件,并使用args属性将任何参数传递给该函数。

声明性语法是我个人最喜欢的Dojo功能之一,因为它使模拟相当复杂的应用程序设计变得极其简单。 它还为不熟悉JavaScript的人提供了开发复杂的Web应用程序的方法。 在下一节中,您将看到如何使用JavaScript来完成所有这些工作。

使用JavaScript使用Dijit

尽管不像声明式使用Dijit那样基本,但是以编程方式添加组件也非常简单。 让我们从创建基本的日历示例开始,就像上一节中创建的一样。 从基本的Dijit模板( 清单1 )开始, <div id="myCalendar"></div>添加到主HTML部分(在<!-- HTML content here -->替换注释<!-- HTML content here --> ): <div id="myCalendar"></div>

现在,在dojo.require("dijit.dijit"); ,添加以下内容: dojo.require("dijit.Calendar");

最后,在dojo.addOnLoad功能块内,添加以下行: var calendar = new dijit.Calendar({}, "myCalendar");

保存文件并将其加载到浏览器中。 您应该看到与图4相同的日历。在这种情况下,您已经向ID为myCalendar HTML代码中添加了一个基本占位符元素。 然后,您使用表达式new dijit.Calendar编程方式创建了日历。 此函数的第一个参数是配置对象(在此示例中为空)。 第二个参数是组件应绑定到HTML元素的ID,在本例中为myCalendar 。 像蛋糕一样容易,对吗?

嵌套组件呢? 让我们继续编写示例,在标题窗格中有一个调色板。 首先,HTML部分应包含: <div id="myTitlePane"></div>

接下来,您需要清单5中的以下dojo.require语句(当然,除了dijit.dijit之外)。

清单5. dojo.require语句
dojo.require("dijit.TitlePane");
dojo.require("dijit.ColorPalette");

最后,清单6中的代码应该放在dojo.addOnLoad块中。

清单6.以编程方式创建标题窗格和调色板
var colorPalette = new dijit.ColorPalette({});
var titlePane = new dijit.TitlePane({
    content: colorPalette,
    title: "Color Picker"
}, "myTitlePane");

在浏览器中保存并加载文件,您将得到如图5所示的结果。 在研究程序化Dijit组件中的事件处理之前,让我们看一下编写上述代码的另一种方法。 用清单7中的代码替换HTML块。

清单7.使用嵌套HTML元素布置组件
<div id="myTitlePane">
    <div id="myColorPalette"></div>
</div>

而且dojo.addOnLoad块应该包含清单8中的代码。

清单8.仅使用ID绑定嵌套的组件
var colorPalette = new dijit.ColorPalette({}, "myColorPalette");
var titlePane = new dijit.TitlePane({
    title: "Color Picker"
}, "myTitlePane");

在此版本中,已使用绑定到其HTML元素在标题窗格中添加了调色板。 然后,在JavaScript中,您可以使用ID绑定两个组件,这意味着您不必使用content属性将调色板添加到标题窗格。 我更喜欢这种方法,因为HTML结构使页面具有更多的语义含义,并使得从HTML语法更容易看到页面的布局。

最后,让我们看看如何向以编程方式声明的Dijit组件添加事件处理。 替换行var colorPalette = new dijit.ColorPalette({}, "myColorPalette"); 清单9中的代码。

清单9.将事件处理程序添加到以编程方式创建的组件中
var colorPalette = new dijit.ColorPalette({
    onChange: function(evt) {
        alert(this.value);
    }
}, "myColorPalette");

保存文件,重新加载浏览器,单击其中一种颜色,然后保存,您应该看到所选颜色的十六进制值。 或者,您可以按原样保留该行,并在其下方添加清单10中的代码。

清单10.使用dojo.connect添加事件处理程序
dojo.connect(colorPalette, "onChange", null, function(evt) {
    alert(this.value);
});

重要的是要指出,事件的名称在Dijit组件中区分大小写。 Dojo对常规DOM对象上的事件使用所有小写字母,对Dijit组件上的事件使用驼峰式大小写(驼峰式大小写是第一个单词为小写,而随后的单词都以首字母大写),因此在处理时要确保使用后者Dijit组件。

使用dijit.byId

如果阅读本系列的第一篇文章 ,您将熟悉dojo.byId函数,该函数获得对DOM元素的引用。 同样,Dojo提供了dijit.byId函数,该函数使您可以获取Dijit组件的句柄。 当您以声明方式创建组件并希望在JavaScript代码中与它们进行交互时,这特别有用。 让我们来看一个例子。

在基本的Dijit模板( 清单1 )中,将以下代码添加到HTML部分: <button id="myButton" dojoType="dijit.form.Button">Push Me</button>

接下来,在dojo.require部分中,添加清单11中的行。

清单11.使用dojo-require
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");

最后,让我们使用dijit.byId获得对按钮的引用,并在单击按钮时显示一个对话框。 将清单12中的代码添加到dojo.addOnLoad函数块中。

清单12.使用dijit.byId连接到按钮
var button = dijit.byId("myButton");
dojo.connect(button, "onClick", null, function(evt) {
    var dialog = new dijit.Dialog({
        content: "You clicked the button!",
        title: "Message"
    }).show();
});

保存文件并在浏览器中打开它。 单击该按钮,您应该看到一个漂亮的对话框,如图6所示。

图6.按钮和对话框
带有消息“您已单击按钮”的对话框。

使用Dijit的布局功能

除了一些非常有用的组件和表单控件之外,Dijit还提供了一个出色的布局框架,这使组织应用程序的界面变得更加容易。 本节说明如何使用Dijit的各种布局组件。 为简洁起见,所有示例均使用Dojo的声明性语法提供,但如果愿意,将它们转换为编程方法应该相对简单。

内容窗格

内容窗格是Dijit布局元素的最基础。 它们允许您定义内容的一部分,该部分可以通过直接将HTML代码提供给content属性来加载,也可以通过XmlHttpRequest调用异步加载。 对于后者,在从服务器加载内容时,内容窗格将显示加载消息。

让我们看一下内容窗格的一个非常基本的示例。 首先,创建一个新文件,并将其命名为content.html之类的名称,然后向其中添加以下代码: <h1>content.html content here!</h1>

现在,从基本的Dijit模板(请参见清单1 ),将清单13中的代码添加到模板HTML部分。

清单13.使用Dijit内容窗格
<button dojoType="dijit.form.Button" id="myButton">
    Load content using XHR
</button>
<div dojoType="dijit.layout.ContentPane" id="myContentPane">
    <h1>Static content here!</h1>
</div>

接下来,将清单14中的代码添加到dojo.require部分

清单14.将内容窗格添加到dojo.require部分
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");

最后,连接按钮和内容窗格,以将content.html加载到内容窗格中。 将清单15中的代码添加到dojo.addOnLoad

清单15.将按钮连接到内容窗格
var button = dijit.byId("myButton");
var contentPane = dijit.byId("myContentPane");

dojo.connect(button, "onClick", null, function(evt) {
    contentPane.attr("href","content.html");
});

保存文件并将其加载到Web浏览器中。 您应该看到类似图7的消息。

图7.通过XHR加载之前
使用XHR按钮加载内容的窗口,此处为静态内容。

现在,单击按钮,消息将更改。

图8.通过XHR加载后
Widnow,带有“使用XHR加载内容”按钮和“ content.html”内容。

诚然,该示例非常简单,但是它应该说明将动态内容加载到Dijit ContentPane组件中是多么容易。 该组件实际上在Dialog等其他Dijit组件中使用,以呈现内容部分。 正如您稍后会看到的那样,它们还经常用于布局容器(如堆栈容器和选项卡容器)中。

堆叠容器

堆栈容器是一种容器,可让您拥有多个不同的子容器,一次只能看到一个子容器(有时称为卡布局)。 如果要创建分步向导,则此布局组件特别有用。 让我们看一下如何创建一个Dijit堆栈容器,并带有一个堆栈控制器以在堆栈之间导航。

首先,从基本的Dijit模板( 清单1 )创建一个新文件。 在HTML代码部分中,添加清单16中的代码。

清单16.创建一个堆栈容器和控制器
<div dojoType="dijit.layout.StackContainer" id="stackContainer">
    <div dojoType="dijit.layout.ContentPane" title="Stack 1">
        This is the content in stack 1.
    </div>
    <div dojoType="dijit.layout.ContentPane" title="Stack 2">
        This is the content in stack 2.
    </div>
</div>
<div dojoType="dijit.layout.StackController" 
containerId="stackContainer"></div>

保存之前,请确保根据需要包括必要的dojo.require调用(请参见清单17)。

清单17.将堆栈容器和控制器添加到dojo.require
dojo.require("dijit.layout.StackContainer");
dojo.require("dijit.layout.StackController");
dojo.require("dijit.layout.ContentPane");

保存文件并将其加载到浏览器中。 您应该看到如图9所示的结果。单击控制器按钮可以更改当前选定的堆栈。 所有这些都不需要JavaScript(当然,除了对dojo.require的调用之外),还不错吧?

图9.运行中的堆栈容器和堆栈控制器
屏幕上的两个按钮,一个带有堆栈1,一个带有堆栈2。

标签容器

像堆栈容器一样,选项卡容器使您可以拥有多个视图,在给定的时间只有一个视图可见。 但是,与堆栈容器不同,选项卡容器以显示在内容上方,下方或旁边的选项卡的形式提供从每个视图移动的选项。 此外,它们不需要任何单独的控件,因为它们内置在组件本身中。 和以前一样,将清单18中的代码添加到代码HTML部分。

清单18.创建一个标签容器
<div style="width: 535px; height: 290px">
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
        <div dojoType="dijit.layout.ContentPane" title="Tab 1">
            This is the content in tab 1.
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Tab 2">
            This is the content in tab 2.
        </div>
    </div>
</div>

在这种情况下,选项卡容器包装在外部<div>容器中,该容器简单地定义了选项卡容器可以包含的区域。 当然,不要忘记将相关行添加到您的dojo.require块中(参见清单19)。

清单19.将标签容器添加到dojo.require
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");

保存文件并将其加载到浏览器中; 结果应如图10所示。您可以通过单击相关选项卡在视图之间进行交换。

图10.使用标签容器
该窗口显示两个选项卡:选项卡1和选项卡2

手风琴容器

让您一次显示一个分区的另一个容器是手风琴容器。 这通常采用垂直展开/折叠布局的形式,一次只能打开一个部分,然后展开以填充手风琴容器的整个空间。 最好的方式是通过一个示例,所以让我们继续创建一个示例。

首先,将清单20中的代码添加到模板HTML部分。

清单20.创建一个手风琴容器
<div style="width: 535px; height: 290px">
    <div dojoType="dijit.layout.AccordionContainer" style="width: 100%; 
height: 100%;">
         <div dojoType="dijit.layout.ContentPane" title="Blade 1">
             This is the content in blade 1.
         </div>
         <div dojoType="dijit.layout.ContentPane" title="Blade 2">
             This is the content in blade 2.
         </div>
        <div dojoType="dijit.layout.ContentPane" title="Blade 3">
            This is the content in blade 3.
        </div>
    </div>
</div>

并且不要忘记您的dojo.require引用(请参见清单21)。

清单21.将cordician容器添加到dojo.require
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");

在浏览器中打开它,结果应如图11所示。

图11.运行中的手风琴容器
3个水平选项卡,第一个扩展为填充窗口,其他两个则合拢。

要在视图之间切换,请单击相关部分的标题(或刀片,我喜欢称呼它们)。

BorderContainer布局

最后,让我们看一下边界容器。 如果以前使用过用户界面库(例如Swing),则可能会熟悉边界容器使您可以将组件放置在四个区域(北,南,东和西)的概念。 在Dojo中,可以使用相同的概念,但是它可以自动提供拆分器,因此功能更加强大。 像往常一样,最好通过一个示例对其进行描述,因此让我们构建一个示例(请参见清单22)。

清单22.创建一个边框容器
<div style="width: 535px; height: 290px">
    <div dojoType="dijit.layout.BorderContainer" style="width: 100%; 
height: 100%;">
        <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">
            This is the content in the top section.
        </div>
        <div dojoType="dijit.layout.ContentPane" region="left" style="width: 100px;" 
splitter="true">
            This is the content in the left section.
        </div>
        <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
            This is the content in the center section.
        </div>
        <div dojoType="dijit.layout.ContentPane" region="right" style="width: 100px;" 
splitter="true">
            This is the content in the right section.
        </div>
        <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true">
             This is the content in the bottom section.
         </div>
     </div>
</div>

清单22创建了一个布局,其中顶部和底部都有,左,右和中间在中间。 在尝试之前,将以下代码(请参见清单23)添加到dojo.require部分。

清单23.将边框容器添加到dojo.require
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");

启动浏览器并打开您刚才保存的文件。 您应该看到类似于图12的窗口。

图12.运行中的边框容器
窗口具有顶部和底部,中间有3个部分。

这不仅为您的应用程序创建了非常结构化的布局,而且还可以自定义,因为用户可以拖动每个窗格上的中心手柄并将其拖动以调整应用程序特定部分的大小。 对于什至还没有使用JavaScript的应用程序( dojo.require调用除外)来说,印象非常深刻。

如本节所述,Dijit使得为应用程序创建高级布局变得非常容易,而无需复杂JavaScript代码。 也可以以编程方式创建本节中使用的所有布局组件。 有关此示例,请查看Dojo文档(请参阅参考资料 )。

DojoX:Dojo的捆绑扩展库

除了Dojo Base库,Dojo Core库和Dijit库之外,Dojo还提供对DojoX的支持,DojoX是一组实验性和补充性组件和功能,而这些功能并没有纳入框架的其他部分。 造成这种情况的原因可能有多种,从代码尚未准备好生产到太大而无法在默认情况下包含代码,或者仅仅是扩展没有像Dojo工具包的主要部分所包含的功能那样广泛使用或要求。 因此,在使用DojoX组件时应格外小心,因为其中某些组件可能未经过严格测试或认证以支持可访问性或国际化。

DojoX包括各种附加功能。 以下列表是DojoX中可用的示例:

  • 音频/视频播放
  • 制图
  • 彗星客户
  • 针对不同数据源的各种数据存储,包括CouchDB数据库,CSV文件,Web API(例如Flickr,Google搜索,Amazon S3等)
  • 矢量绘图API
  • 附加表单小部件
  • 数据网格
  • 图像小部件(包括画廊,幻灯片放映和灯箱)
  • JSON查询
  • 更多布局容器
  • RPC支持
  • 其他各种小部件,包括仪表,备用日历和颜色选择器,鱼眼小部件,文件选择器,广告横幅旋转器等

在您的应用程序中包括DojoX扩展非常简单。 与其他JavaScript库不同,在其他JavaScript库中,您需要浏览存储库,下载其他文件,将它们上传到服务器并在代码中引用这些文件,而DojoX的工作方式与Dijit组件几乎相同。 与往常一样,最容易通过示例说明这一点。 让我们创建一个使用DojoX的Ratings表单小部件的新页面。

首先,使用清单1中的基本Dijit模板创建一个新页面。 在顶部附近包含claro.css文件的行下方,添加第二个<link>标记以加载评分窗口小部件CSS文件: <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/form/resources/Rating.css" />

接下来,在代码HTML部分中,添加以下行以添加具有5个可用星星的评分控件,默认情况下选择3个星星: <div dojoType="dojox.form.Rating" numstars="5" value="3"></div>

最后,在您之前使用dojo.require加载Dijit组件的位置,添加以下行: dojo.require("dojox.form.Rating");

这样就完成了。 确实,这就是在应用程序中使用DojoX组件的全部内容。 当然,某些更复杂的小部件(例如网格等)可能比该基本组件需要更多的工作,但是所需的基本步骤是相同的​​。 最终结果应类似于图13。

图13.运行中的DojoX评级小部件
带有5星的窗口,带有3个阴影的黄色星。

有关DojoX及其提供的所有功能的更多详细信息,请参阅Dojo文档。 该文件的最新版本的链接中提供的相关主题

结论

正如您在本文中了解到的,Dojo不仅仅是一个JavaScript框架。 Dijit组件库拥有大量易于使用的小部件,这些小部件可以极大地增强应用程序的可用性,从而使开发人员无需从头开始编写这些组件。 此外,所有Dijit组件都是完全主题友好的,因此可以轻松使用Dojo来构建适合您自己的应用程序的功能。 在本文中,您学习了如何使用Dijit以声明方式和编程方式创建组件,以及如何定义要使用的主题。 您还学习了如何仅用几行代码即可创建令人印象深刻的布局。 最后,您发现添加DojoX必须为您的应用程序提供的扩展功能非常简单,而无需下载和配置其他插件。


翻译自: https://www.ibm.com/developerworks/web/library/wa-ground3/index.html

dijit

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值