dojo1.7翻译 Dijit的主题，按钮和文本框[DOJO]

所属分类：[界面编程] | 创建时间：2013-01-13 | 文章属性：翻译 | 文章来源：http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/ | 作者：windfly

原文地址：<a href="http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/">http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/</a>
 
 
 在本教程中，我们将向您介绍使用Dijit创建和使用简单的表单元素，包括如何为你的web应用设置dijit主题。
 
 
 难度：初级 
 
 
 Dojo的版本：1.7
 
 
  
 
 <h2>
 介绍
 </h2>
 
 Dijit是Dojo工具包的UI框架，包含一套完整的小部件，可以帮助您快速开发Web应用程序。 
 大多数Web应用程序的核心是表单元素的简单部件，并且判断着是否允许用户输入。Dijit的有很多的部件可以让你的基于表单快速开发，其中包括按钮，文本框，验证的文本框，选择器，滑块等。
 
 
  
 
 
 此外，Dijit还有主题化框架。如果需要对所有dijit进行视觉方面外观调整，你可以定义详细的主题内容。主题化是简单易用的。Dijit有四个主题可供选择：Claro, 
 Tundra, Soria, Nihilo。
 
 
  
 
 <h2>
 使用Dijit的主题
 </h2>
 
 使用dijit主题，还需要两件事：引入主题的CSS文件，在你的页面上对body元素加入CSS样式名，像这样：
 
 
  
 
 <pre class="html" name="code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Hello Dijit!&lt;/title&gt;
    &lt;!-- load Dojo --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css&quot;&gt;
    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js&quot; data-dojo-config=&quot;isDebug: true, async: true, parseOnLoad: true&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;!-- set the claro class on our body element --&gt;
&lt;body class=&quot;claro&quot;&gt;
    &lt;h1 id=&quot;greeting&quot;&gt;Hello&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

主题的CSS文件应该在加载dojo.js之前就引入。
 
 
  
 
 
 要为主题是claro ， tundra ， 
 soria和nihilo的每个元素都加上实际的CSS类名才会使页面上的所有dijit部件是一致风格。一个典型做法就是在页面的body元素上设置主题样式就行了。
 
 
 
 
 
 
 您可以使用div块级元素限制dijit主题只对一个页面的一小部分有效;但是，记住，如果没有在body上设置css，那么任何弹出的部件（或部件，如使用弹出dijit/form/ComboButton 
 dijit/form/DropDownButton ， dijit/form/Select Dijit dijit/form/Select 
 ）创建和放置弹出的DOM结构直接子元素，将不会应用到你的主题。
 
 
  
 
 
 现在，我们已经建立了一个典型的Dijit基本页面，让我们继续前进，开始创建我们想使用的表单控件。
 
 
  
 
 <h2>
 Dijit的按钮
 </h2>
 
 一个按钮可能在是任何页面中都是最基本的部件，作用于用户输入，允许用户触发的动作，如提交表单或表单上的重置值等。 Dijit的实现很简单：
 
 
  
 
 <pre class="html" name="code">&lt;body class=&quot;claro&quot;&gt;
    &lt;button id=&quot;btn&quot; data-dojo-type=&quot;dijit.form.Button&quot;
        data-dojo-props=&quot;
            onClick:function(){ console.log('First button was clicked!'); }&quot;&gt;
        Click Me!
    &lt;/button&gt;
    &lt;script&gt;
        // load requirements for declarative widgets in page content
        require([&quot;dijit/form/Button&quot;, &quot;dojo/parser&quot;, &quot;dojo/domReady!&quot;]);
    &lt;/script&gt;
&lt;/body&gt;</pre>

不要忘记：如果您使用dojo的部件，确保data-dojo-config属性页上的dojo.js上添加&quot;parseOnLoad: 
 true&quot;的脚本标记 。 此外，如果你打算在代码中进行解析时，则要明确require([&quot;dojo/parser&quot;])。
 
 
  
 
 
 正如你可以看到，创建dijit/form/Button 是非常简单的，非常像一个普通的HTML button元素。 
 Dijit的按钮也支持图像标签，甚至单独的图像像这样：
 
 
  
 
 <pre class="html" name="code">&lt;body class=&quot;claro&quot;&gt;
    &lt;button id=&quot;btn2&quot; data-dojo-type=&quot;dijit.form.Button&quot;
        data-dojo-props=&quot;
            iconClass:'dijitIconNewTask',
            showLabel:false,
            onClick:function(){ console.log('Second button was clicked!'); }&quot;&gt;
        Click Me!
    &lt;/button&gt;
    &lt;script&gt;
        // load requirements for declarative widgets in page content
        require([&quot;dojo/parser&quot;, &quot;dijit/form/Button&quot;, &quot;dojo/domReady!&quot;]);
    &lt;/script&gt;
&lt;/body&gt;</pre>
 
  
 
 
 <a href="http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/demo/Button.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/demo/Button.html"> 运行示例</a>
 
 
  
 
 
 上面的例子中的属性：
 
 
  
 
 <ul>
 <li>
 iconClass ：表示CSS类使用（适用于图像）
 </li>
 <li>
 showLabel ：决定是否显示任何按钮上的文字
 </li>
 <li>
 title ：设置上呈现的DOM节点的widget的HTML title属性的值
 </li>
 <li>
 label ：表明按钮标签的内容;声明，这是内容（通过指定innerHTML代表widget的元素）
 </li>
 </ul>
 
  
 
 
  
 
 
 当使用 dijit/form/Button （或dijit/form/Form 
 ），你可以添加type:&quot;submit&quot;或type:&quot;reset&quot;的按钮的属性（通过data-dojo-props声明，或通过在对象的构造，编程）来实现相同类型的HTML按钮。
 
 
  
 
 
 最简单的用法dijit/form/Button，指定type:&quot;button&quot;也是建议使用的很好的做法，，默认的情况下，该按钮将默认其类型submit。
 
 
  
 
 
  
 
 
 Dijit的还包括其他三个按钮控件：
 
 
  
 
 
  
 
 <ul>
 <li>
 dijit/form/ToggleButton ：一个按钮，有开/关状态
 </li>
 <li>
 dijit/form/DropDownButton当点击按钮显示一个弹出的窗口小部件（如菜单）
 </li>
 <li>
 dijit/form/ComboButton ：像dijit/form/Button和 
 dijit/form/DropDownButton的混合体，当点击下拉区域，可以显示一个弹出窗口部件号 
 </li>
 </ul>
 
  
 
 
 下面的例子显示在行动这三个部件：
 
 
  
 
 <pre class="html" name="code">&lt;body class=&quot;claro&quot;&gt;
    &lt;button id=&quot;toggle&quot; data-dojo-type=&quot;dijit.form.ToggleButton&quot;
        data-dojo-props=&quot;iconClass:'dijitCheckBoxIcon', checked:true&quot;&gt;
        Toggle
    &lt;/button&gt;
 
    &lt;div id=&quot;combo&quot; data-dojo-type=&quot;dijit.form.ComboButton&quot;
        data-dojo-props=&quot;
            optionsTitle:'Save Options',
            iconClass:'dijitIconFile',
            onClick:function(){ console.log('Clicked ComboButton'); }&quot;&gt;
        &lt;span&gt;Combo&lt;/span&gt;
        &lt;div id=&quot;saveMenu&quot; data-dojo-type=&quot;dijit.Menu&quot;&gt;
            &lt;div data-dojo-type=&quot;dijit.MenuItem&quot;
                data-dojo-props=&quot;
                    iconClass:'dijitEditorIcon dijitEditorIconSave',
                    onClick:function(){ console.log('Save'); }&quot;&gt;
                Save
            &lt;/div&gt;
            &lt;div data-dojo-type=&quot;dijit.MenuItem&quot;
                data-dojo-props=&quot;onClick:function(){ console.log('Save As'); }&quot;&gt;
                Save As
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
 
    &lt;div id=&quot;dropDown&quot; data-dojo-type=&quot;dijit.form.DropDownButton&quot;
        data-dojo-props=&quot;iconClass:'dijitIconApplication'&quot;&gt;
        &lt;span&gt;DropDown&lt;/span&gt;
        &lt;div data-dojo-type=&quot;dijit.TooltipDialog&quot;&gt;
            This is a TooltipDialog. You could even put a form in here!
        &lt;/div&gt;
    &lt;/div&gt;
 
    &lt;script&gt;
        // load requirements for declarative widgets in page content
        require([&quot;dijit/form/ToggleButton&quot;, &quot;dijit/form/ComboButton&quot;, &quot;dijit/Menu&quot;, &quot;dijit/MenuItem&quot;, &quot;dijit/form/DropDownButton&quot;, &quot;dijit/TooltipDialog&quot;, &quot;dojo/parser&quot;]);
    &lt;/script&gt;
&lt;/body&gt;</pre>

注意弹出的部件， dijit/form/ComboButton dijit/form/DropDownButton和 dijit/Menu 
 dijit/TooltipDialog dijit/ColorPalette一样都是弹出框式的
 
 
  
 
 
  
 
 <h2>
 Dijit的TextBox系列
 </h2>
 
 没有基本的用户输入的UI工具包将是不完整的，Dijit也不例外。 在dijit/form的命名空间内，有一些基础的部件，每一个都具有特定用途：
 
 
  
 
 
  
 
 <ul>
 <li>
 dijit/form/TextBox ：一个基本的文本框
 </li>
 <li>
 dijit/form/SimpleTextarea ：大量文字输入，一个基本的textarea 
 </li>
 <li>
 dijit/form/ValidationTextBox文本框，一个基本的验证能力，可以进一步定制
 </li>
 <li>
 dijit/form/NumberTextBox ：确保输入一个文本框，是数字
 </li>
 <li>
 dijit/form/DateTextBox ：一个文本框，其中包括一个弹出日历
 </li>
 <li>
 dijit/form/TimeTextBox ：一个文本框，其中包括一个弹出时间选择器
 </li>
 <li>
 dijit/form/CurrencyTextBox ：一个扩展dijit/form/NumberTextBox本地化货币
 </li>
 <li>
  dijit/form/NumberTextBox 
 dijit/form/NumberSpinner提供扩展dijit/form/NumberTextBox逐步改变值的按钮
 </li>
 <li>
 dijit/form/Textarea ：一个扩展dijit/form/SimpleTextarea动态增加或减少其高度
 </li>
 </ul>
 
 如果你要使用dijit/form/DateTextBox或dijit/form/TimeTextBox 
 ，你将需要有主题的CSS引入并设置body元素的css样式。
 
 
  
 
 
 在接下来的例子中，我们创建的实例dijit/form/TextBox和dijit/form/SimpleTextarea 。
 
 
  
 
 
  
 
 
  
 
 <pre class="html" name="code">&lt;body class=&quot;claro&quot;&gt;
    &lt;div&gt;
        &lt;label for=&quot;text&quot;&gt;Name:&lt;/label&gt;
        &lt;input id=&quot;text&quot; data-dojo-type=&quot;dijit.form.TextBox&quot;
            data-dojo-props=&quot;placeHolder:'Enter text here.'&quot;&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label for=&quot;textarea&quot;&gt;Description:&lt;/label&gt;
        &lt;textarea id=&quot;textarea&quot; rows=&quot;5&quot; cols=&quot;50&quot;
            data-dojo-type=&quot;dijit.form.SimpleTextarea&quot;
            data-dojo-props=&quot;
                onFocus:function(){ console.log('textarea focus handler') },
                onBlur:function(){ console.log('textarea blur handler') },
                selectOnClick:true
        &quot;&gt;This is a sample SimpleTextarea.&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;script&gt;
        // load requirements for declarative widgets in page content
        require([&quot;dijit/form/TextBox&quot;, &quot;dijit/form/SimpleTextarea&quot;, &quot;dojo/parser&quot;, &quot;dojo/domReady!&quot;]);
    &lt;/script&gt;
&lt;/body&gt;</pre>
 
  
 
 
 <a href="http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/demo/TextBox.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/demo/TextBox.html"> 运行示例</a>
 
 
  
 
 
 下面的例子演示了基本功能dijit/form/NumberTextBox dijit/form/CurrencyTextBox 
 dijit/form/TimeTextBox dijit/form/DateTextBox 。
 
 
  
 
 <pre class="html" name="code">&lt;body class=&quot;claro&quot;&gt;
    &lt;div&gt;
        &lt;label for=&quot;number&quot;&gt;Age:&lt;/label&gt;
        &lt;input id=&quot;number&quot; type=&quot;text&quot; value=&quot;54&quot; required=&quot;true&quot; data-dojo-type=&quot;dijit.form.NumberTextBox&quot;&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label for=&quot;currency&quot;&gt;Annual Salary:&lt;/label&gt;
            &lt;input id=&quot;currency&quot; value=&quot;54775.53&quot; required=&quot;true&quot;
                data-dojo-type=&quot;dijit.form.CurrencyTextBox&quot;
                data-dojo-props=&quot;
                    constraints:{fractional:true},
                    currency:'USD',
                    invalidMessage:'Invalid amount. Cents are mandatory.'&quot;&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label for=&quot;time&quot;&gt;Start Time:&lt;/label&gt;
        &lt;input id=&quot;time&quot; required=&quot;true&quot;
            data-dojo-type=&quot;dijit.form.TimeTextBox&quot;
            data-dojo-props=&quot;
                constraints: {
                    timePattern: 'HH:mm:ss',
                    clickableIncrement: 'T00:15:00',
                    visibleIncrement: 'T00:15:00',
                    visibleRange: 'T01:00:00'
                },
                invalidMessage:'Invalid time.'&quot;&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label for=&quot;date&quot;&gt;Start Date:&lt;/label&gt;
            &lt;input id=&quot;date&quot; value=&quot;2011-09-15&quot; data-dojo-type=&quot;dijit.form.DateTextBox&quot;&gt;
    &lt;/div&gt;
    &lt;script&gt;
        // load requirements for declarative widgets in page content
        require([&quot;dijit/form/NumberTextBox&quot;, &quot;dijit/form/CurrencyTextBox&quot;, &quot;dijit/form/TimeTextBox&quot;, &quot;dijit/form/DateTextBox&quot;, &quot;dojo/domReady!&quot;, &quot;dojo/parser&quot;]);
    &lt;/script&gt;
&lt;/body&gt;</pre>

<a href="http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/demo/MoreBox.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/demo/MoreBox.html">运行示例</a>
 
 
  
 
 
 同样，如果你要定义你的部件，不要忘记dojo/parser ，并添加“parseOnLoad：true”到 
 标记data-dojo-config的脚本dojo.js 。
 
 
  
 
 <h2>
 结论
 </h2>
 
 在本教程中，我们已经向您展示如何Dijit的为您提供了许多功能：两个基本输入任何类型的按钮和文本框。 
 此外，我们已经向您展示包括一个基于CSS的主题，使你的用户界面既美观又实用的技术。