从头开始学习 Dojo，第 3 部分: 利用 Dijit 组件框架打造丰富的

dojo.require("dijit.TitlePane");
dojo.require("dijit.ColorPalette");

var colorPalette = new dijit.ColorPalette({});
var titlePane = new dijit.TitlePane({
    content: colorPalette,title: "Color Picker"
},"myTitlePane");

 <div id="myTitlePane">
    <div id="myColorPalette"></div>
</div>

var colorPalette = new dijit.ColorPalette({},"myColorPalette");
var titlePane = new dijit.TitlePane({
    title: "Color Picker"
},34); line-height:1.5em; font-size:1.166em!important"> 在这个版本中，您使用所绑定的 HTML 元素添加了标题窗格内的调色板。在 JavaScript 中，随后会使用 ID 绑定组件，这意味着不必使用内容属性将调色板添加到标题窗格之中。我倾向于使用这种方法，因为 HTML 结构为页面提供了更多语义含义，使您能够更加轻松地通过 HTML 语法观察页面布局。
 
  
 最后，让我们来看看如何为通过编程的方式声明的 Dijit 组件添加事件处理。使用清单 9 中的代码取代var colorPalette = new dijit.ColorPalette({},"myColorPalette");代码行。
 
  
 清单 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，第 1 部分：开始 Dojo 开发，那么应该已经熟悉了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",function(evt) {
    var dialog = new dijit.Dialog({
        content: "You clicked the button!",title: "Message"
    }).show();
});
 
  
 
  
 请保存文件，并在您的浏览器中打开它。然后单击按钮，您会看到一个对话框，如图 6 所示。
 
  
 图 6. 按钮和对话框
 
   
  
回页首
 
  
 使用 Dijit 的布局特性
 
  
 除了一些非常有用的组件和表单控件之外，Dijit 还提供了一个出色的布局框架，使您能够更加轻松地组织应用程序的界面。这一节将介绍如何使用 Dijit 的各种布局组件。为了简便起见，所有示例均使用 Dojo 的声明式语法提供，但是，如有必要，您应该可以能够很轻松地将其转为编程式方法。
 
  
 内容窗格（panes）
 
  
 内容窗格是最基本的 Dijit 布局组件。它们允许您定义一个内容部分，通过直接将 HTML 代码提供给内容属性来载入这一部分，或者通过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 载入内容窗格。在dojo.addOnLoad内添加清单 15 的代码。
 
  
 清单 15. 将按钮连接到内容窗格
 
  
 
   
var button = dijit.byId("myButton");
var contentPane = dijit.byId("myContentPane");

dojo.connect(button,function(evt) {
    contentPane.attr("href","content.html");
});
 
  
 
  
 请保存文件，并将它载入您的 Web 浏览器。您会看到如图 7 所示的消息。
 
  
 图 7. 通过 XHR 加载之前
 
   
  
 现在，请单击按钮，消息将会发生变化。
 
  
 图 8. 通过 XHR 加载之后
 
   
  
 不可否认，这个示例非常简单，但它应该能够展示将动态内容载入一个 DijitContentPane组件是多么轻松。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. 堆叠容器和堆叠控制器实例
 
   
  
 选项卡容器
 
  
 与堆叠容器相似，选项卡容器允许您拥有多个视图，而任意给定时间仅有一个视图可见。然而，与堆叠容器不同的是，选项卡容器提供了一些选项，这些选项以显示在内容上方、下方或旁边的选项卡的形式出现，可在各视图之间切换。除此之外，它们不需要任何独立控件，因为它们直接构建在组件本身之内。与前面一样，您可以将清单 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. 选项卡容器实例
 
   
  
回页首
 
  
 折叠容器
 
  
 另外一种允许您每次显示一个部分的容器就是折叠容器。这种容器通常采用垂直展开/折叠的布局形式，每次仅可打开一个部分，该部分展开时将填充折叠容器的整个空间。要了解这种容器，最好的方法就是观察示例，因此下面我们将给出一个示例。
 
  
 首先，将清单 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. 将折叠容器添加到dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");