dojo1.7翻译 Dijit的主题,按钮和文本框(Dijit Themes, Buttons, and Textboxes)
?
原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/
在本教程中,我们将向您介绍使用Dijit创建和使用简单的表单元素,包括如何为你的web应用设置dijit主题。
难度:初级?
Dojo的版本:1.7
?
介绍Dijit是Dojo工具包的UI框架,包含一套完整的小部件,可以帮助您快速开发Web应用程序。 大多数Web应用程序的核心是表单元素的简单部件,并且判断着是否允许用户输入。Dijit的有很多的部件可以让你的基于表单快速开发,其中包括按钮,文本框,验证的文本框,选择器,滑块等。
?
此外,Dijit还有主题化框架。如果需要对所有dijit进行视觉方面外观调整,你可以定义详细的主题内容。主题化是简单易用的。Dijit有四个主题可供选择:Claro, Tundra, Soria, Nihilo。
?
使用Dijit的主题使用dijit主题,还需要两件事:引入主题的CSS文件,在你的页面上对body元素加入CSS样式名,像这样:
?
??
?
不要忘记:如果您使用dojo的部件,确保data-dojo-config属性页上的dojo.js上添加"parseOnLoad: true"的脚本标记 。 此外,如果你打算在代码中进行解析时,则要明确require(["dojo/parser"])。
?
正如你可以看到,创建dijit/form/Button 是非常简单的,非常像一个普通的HTML button元素。 Dijit的按钮也支持图像标签,甚至单独的图像像这样:
?
?
?运行示例
?
上面的例子中的属性:
?
iconClass :表示CSS类使用(适用于图像)showLabel :决定是否显示任何按钮上的文字title :设置上呈现的DOM节点的widget的HTML title属性的值label :表明按钮标签的内容;声明,这是内容(通过指定innerHTML代表widget的元素)?
?
当使用 dijit/form/Button (或dijit/form/Form ),你可以添加type:"submit"或type:"reset"的按钮的属性(通过data-dojo-props声明,或通过在对象的构造,编程)来实现相同类型的HTML按钮。
?
最简单的用法dijit/form/Button,指定type:"button"也是建议使用的很好的做法,,默认的情况下,该按钮将默认其类型submit。
?
?
Dijit的还包括其他三个按钮控件:
?
?
dijit/form/ToggleButton :一个按钮,有开/关状态dijit/form/DropDownButton当点击按钮显示一个弹出的窗口小部件(如菜单)dijit/form/ComboButton :像dijit/form/Button和 dijit/form/DropDownButton的混合体,当点击下拉区域,可以显示一个弹出窗口部件号??
下面的例子显示在行动这三个部件:
?
??
注意弹出的部件, dijit/form/ComboButton dijit/form/DropDownButton和 dijit/Menu dijit/TooltipDialog dijit/ColorPalette一样都是弹出框式的
?
?
Dijit的TextBox系列没有基本的用户输入的UI工具包将是不完整的,Dijit也不例外。 在dijit/form的命名空间内,有一些基础的部件,每一个都具有特定用途:
?
?
dijit/form/TextBox :一个基本的文本框dijit/form/SimpleTextarea :大量文字输入,一个基本的textarea?dijit/form/ValidationTextBox文本框,一个基本的验证能力,可以进一步定制dijit/form/NumberTextBox :确保输入一个文本框,是数字dijit/form/DateTextBox :一个文本框,其中包括一个弹出日历dijit/form/TimeTextBox :一个文本框,其中包括一个弹出时间选择器dijit/form/CurrencyTextBox :一个扩展dijit/form/NumberTextBox本地化货币?dijit/form/NumberTextBox dijit/form/NumberSpinner提供扩展dijit/form/NumberTextBox逐步改变值的按钮dijit/form/Textarea :一个扩展dijit/form/SimpleTextarea动态增加或减少其高度如果你要使用dijit/form/DateTextBox或dijit/form/TimeTextBox ,你将需要有主题的CSS引入并设置body元素的css样式。
?
在接下来的例子中,我们创建的实例dijit/form/TextBox和dijit/form/SimpleTextarea 。
?
?
?
?
?运行示例
?
下面的例子演示了基本功能dijit/form/NumberTextBox dijit/form/CurrencyTextBox dijit/form/TimeTextBox dijit/form/DateTextBox 。
?
??
运行示例
?
同样,如果你要定义你的部件,不要忘记dojo/parser ,并添加“parseOnLoad:true”到 标记data-dojo-config的脚本dojo.js 。
?
结论在本教程中,我们已经向您展示如何Dijit的为您提供了许多功能:两个基本输入任何类型的按钮和文本框。 此外,我们已经向您展示包括一个基于CSS的主题,使你的用户界面既美观又实用的技术。
?