Dojo - Creating a custom widget创建自定义小部件

最新推荐文章于 2025-11-15 17:56:14 发布

原创

最新推荐文章于 2025-11-15 17:56:14 发布 · 397 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dojo

本文档介绍了如何利用Dojo和Dijit框架中的dijit/_WidgetBase和dijit/_TemplatedMixin来创建自定义小部件。首先，为自定义小部件创建文件结构，接着创建表示单个作者的HTML标记，然后将其转换为Dijit模板，再通过声明式方式设置属性和模板内容。最后，通过编写小部件类来添加自定义属性和方法，完成小部件的创建。

In this recipe, we'll be covering how to leverage pieces of Dojo and the Dijit framework to create your own custom widgets, specifically covering use of dijit/_WidgetBase and dijit/_TemplatedMixin to quickly and easily set up your widget.

在这个菜谱中，我们将介绍如何利用Dojo和Dijit框架创建您自己的自定义小部件，特别是使用dijit/_WidgetBase和dijit/_TemplatedMixin来快速轻松地设置小部件。

Introduction简介

The Dojo Toolkit ships with the Dijit framework, which is a set of graphical controls called widgets. We can build graphical user interfaces with these widgets.

Dojo工具箱是与Dijit框架一同运行的，Dijit框架是一套称为widget的图形控件。我们可以使用这些小部件创建用户界面。

You may require a specific widget that is not provided by Dojo. In this case, you can use Dijit's core in order to build this widget with more ease.

您可能需要Dojo没有提供的特定小部件。在这种情况下，您可以使用Dijit的核心来更轻松地构建这个小部件。

Setup

For our scenario, let's say that we have a data source somewhere, in JSON format, listing a series of authors, such as those who've penned a tutorial for Dojo. We happen to have that, and it looks something like this:

对于我们的场景，假如我们有一个数据源，以JSON格式，列出了一系列的作者，例如Dojo作者。它看着像下面这样：

[

{

"name": "Brian Arnold",

"avatar": "/includes/authors/brian_arnold/avatar.jpg",

"bio": "Brian Arnold is a software engineer at SitePen, Inc., ..."

/* More authors here... */

]

We also know that we want our end result to live in a page, somewhere like this:

我们也知道我们希望我们的最终结果是活在一个页面上，就像这样：

<body>

<h2>Authors</h2>

</div>

</body>

We'll also say that we want it to be a little fancy—perhaps we get a background color to fade in as we mouse over it. Eventually, we want it to look something like this:

我们也会说，我们希望它有点小花哨——当我们鼠标从上面移开时也许我们得到一个背景色淡入。最终，我们希望它看起来像这样：