- 浏览: 677053 次
- 性别:
- 来自: 合肥
文章分类
最新评论
-
di1984HIT:
学习了,学习了!
Tomcat的URL中文乱码解决以及传输优化 -
arottenapple:
...
我的二十一天CoreJava 学习笔记 -
黯淡流觞:
...
我的二十一天CoreJava 学习笔记 -
onlyOneToOne:
wsc830719 写道@RequestMapping(val ...
spring mvc3中 ResponseBody中文乱码 -
waj_615:
但是打印订单不是简单的string 啊
用java实现打印功能
原文地址: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样式名,像这样:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello Dijit!</title> <!-- load Dojo --> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css"> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script> </head> <!-- set the claro class on our body element --> <body class="claro"> <h1 id="greeting">Hello</h1> </body> </html>
主题的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基本页面,让我们继续前进,开始创建我们想使用的表单控件。
Dijit的按钮
一个按钮可能在是任何页面中都是最基本的部件,作用于用户输入,允许用户触发的动作,如提交表单或表单上的重置值等。 Dijit的实现很简单:
<body class="claro"> <button id="btn" data-dojo-type="dijit.form.Button" data-dojo-props=" onClick:function(){ console.log('First button was clicked!'); }"> Click Me! </button> <script> // load requirements for declarative widgets in page content require(["dijit/form/Button", "dojo/parser", "dojo/domReady!"]); </script> </body>
不要忘记:如果您使用dojo的部件,确保data-dojo-config属性页上的dojo.js上添加"parseOnLoad: true"的脚本标记 。 此外,如果你打算在代码中进行解析时,则要明确require(["dojo/parser"])。
正如你可以看到,创建dijit/form/Button 是非常简单的,非常像一个普通的HTML button元素。 Dijit的按钮也支持图像标签,甚至单独的图像像这样:
<body class="claro"> <button id="btn2" data-dojo-type="dijit.form.Button" data-dojo-props=" iconClass:'dijitIconNewTask', showLabel:false, onClick:function(){ console.log('Second button was clicked!'); }"> Click Me! </button> <script> // load requirements for declarative widgets in page content require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"]); </script> </body>
上面的例子中的属性:
- 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的混合体,当点击下拉区域,可以显示一个弹出窗口部件号
下面的例子显示在行动这三个部件:
<body class="claro"> <button id="toggle" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked:true"> Toggle </button> <div id="combo" data-dojo-type="dijit.form.ComboButton" data-dojo-props=" optionsTitle:'Save Options', iconClass:'dijitIconFile', onClick:function(){ console.log('Clicked ComboButton'); }"> <span>Combo</span> <div id="saveMenu" data-dojo-type="dijit.Menu"> <div data-dojo-type="dijit.MenuItem" data-dojo-props=" iconClass:'dijitEditorIcon dijitEditorIconSave', onClick:function(){ console.log('Save'); }"> Save </div> <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){ console.log('Save As'); }"> Save As </div> </div> </div> <div id="dropDown" data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass:'dijitIconApplication'"> <span>DropDown</span> <div data-dojo-type="dijit.TooltipDialog"> This is a TooltipDialog. You could even put a form in here! </div> </div> <script> // load requirements for declarative widgets in page content require(["dijit/form/ToggleButton", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/form/DropDownButton", "dijit/TooltipDialog", "dojo/parser"]); </script> </body>
注意弹出的部件, 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 。
<body class="claro"> <div> <label for="text">Name:</label> <input id="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Enter text here.'"> </div> <div> <label for="textarea">Description:</label> <textarea id="textarea" rows="5" cols="50" data-dojo-type="dijit.form.SimpleTextarea" data-dojo-props=" onFocus:function(){ console.log('textarea focus handler') }, onBlur:function(){ console.log('textarea blur handler') }, selectOnClick:true ">This is a sample SimpleTextarea.</textarea> </div> <script> // load requirements for declarative widgets in page content require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]); </script> </body>
下面的例子演示了基本功能dijit/form/NumberTextBox dijit/form/CurrencyTextBox dijit/form/TimeTextBox dijit/form/DateTextBox 。
<body class="claro"> <div> <label for="number">Age:</label> <input id="number" type="text" value="54" required="true" data-dojo-type="dijit.form.NumberTextBox"> </div> <div> <label for="currency">Annual Salary:</label> <input id="currency" value="54775.53" required="true" data-dojo-type="dijit.form.CurrencyTextBox" data-dojo-props=" constraints:{fractional:true}, currency:'USD', invalidMessage:'Invalid amount. Cents are mandatory.'"> </div> <div> <label for="time">Start Time:</label> <input id="time" required="true" data-dojo-type="dijit.form.TimeTextBox" data-dojo-props=" constraints: { timePattern: 'HH:mm:ss', clickableIncrement: 'T00:15:00', visibleIncrement: 'T00:15:00', visibleRange: 'T01:00:00' }, invalidMessage:'Invalid time.'"> </div> <div> <label for="date">Start Date:</label> <input id="date" value="2011-09-15" data-dojo-type="dijit.form.DateTextBox"> </div> <script> // load requirements for declarative widgets in page content require(["dijit/form/NumberTextBox", "dijit/form/CurrencyTextBox", "dijit/form/TimeTextBox", "dijit/form/DateTextBox", "dojo/domReady!", "dojo/parser"]); </script> </body>
同样,如果你要定义你的部件,不要忘记dojo/parser ,并添加“parseOnLoad:true”到 标记data-dojo-config的脚本dojo.js 。
结论
在本教程中,我们已经向您展示如何Dijit的为您提供了许多功能:两个基本输入任何类型的按钮和文本框。 此外,我们已经向您展示包括一个基于CSS的主题,使你的用户界面既美观又实用的技术。
发表评论
-
dojo封装dialog提示框
2012-06-20 10:20 5572/** * 显示dojo的弹出框.前提是已经引用了相 ... -
dojo封装表单ajax提交
2012-06-20 10:16 1672/** * dojo的ajax提交form(post ... -
封装创建dojo的dialog
2012-06-18 13:55 0/** * 显示dojo的弹出框.前提是已经引用了相 ... -
自定义封装dojo通用ajax提交表单
2012-06-18 13:52 2607/** * dojo的ajax提交form(post ... -
使用dojo的dialog自定义confirm效果
2012-06-18 13:43 5057/** * 使用dojo dialog模拟confi ... -
dojo 制做非模态窗口dialog
2012-06-16 13:27 4280dojo的dialog效果基本上都是模态的,也就是说,在弹出窗 ... -
dojo1.7的加载方法
2012-06-01 17:16 4230对于dojo1.7来说,最大的变化就是引入了AMD异步加载器。 ... -
不翻译DOJO了
2012-05-16 17:57 1071翻译DOJO的时间并不长。总是感觉把老外的话翻译过来很是生硬, ... -
dojo1.7翻译 数组工具(Arrays Made Easy)
2012-05-14 10:55 1863英文地址:http://dojotoolkit.org/ ... -
dojo1.7翻译 动画效果(Animations)
2012-05-02 12:08 2719原文地址:http://dojotoolk ... -
dojo1.7翻译 动态效果(Dojo Effects)
2012-04-27 10:15 1280原文地址:http://dojotoolkit.org/doc ... -
dojo1.7翻译 处理DOM(Dojo DOM Functions)
2012-04-26 15:51 2475原文地址:http://dojotoolkit.org/doc ... -
dojo1.7翻译 ajax跨域请求(Getting Jiggy with JSONP)
2012-04-25 12:02 3120原文地址:http://dojotoolk ... -
dojo1.7翻译 ajax功能(Ajax with Dojo)
2012-04-24 15:04 1534原文地址:http://dojotoolk ... -
dojo1.7翻译 搜索节点功能(Using dojo/query)
2012-04-23 15:32 1832原文地址:http://dojotoolkit.org/doc ... -
dojo1.7翻译 hello,dojo
2012-04-22 15:21 2101原文地址:http://dojotoolkit.org/doc ... -
dojo1.7翻译 定义类(Classy JavaScript with dojo/_base/declare)
2012-04-20 15:34 2496原文地址:http://dojotoolkit.org/doc ... -
dojo1.7翻译 定义模块(Defining Modules)
2012-04-18 17:21 6772原文地址:http://dojotoolkit ... -
dojo1.7翻译 通过dojoConfig来配置dojo
2012-04-18 09:20 5151原文地址:http://dojotoolk ... -
dojo1.7翻译 Hello,World
2012-04-17 10:17 1561原文地址:http://dojotoolkit.org/ref ...
相关推荐
Dojo1.7 Api chm 英文版
Dojo 1.7 中文版本注释功能说明,以Dojo使用案例,很经典,做为系统了解Dojo功能及用法很有用!
Dojo 1.7 版本注释 非常全面 收集了很就在这里和大家共享。共同学习。
dojo 源码1.7汇总 包括dijit 和 dojo 打包汇总 非常好的
最新dojo包,内含最新的实例若干个。是入门学习的好帮手!
Extract files from the download locally or on a web server. Include <SCRIPT TYPE="text/javascript" SRC="dojo/...Browse to dojo/tests/runTests.html or dijit/themes/themeTester.html to see Dojo in action
Dojo开发包: 包含以下目录dijit dojo dojox util
Dojo 1.1.1 提供了上百个包,这些包分别放入三个一级命名空间:Dojo,Dijit和 DojoX 。其中 Dojo 是核心功能包 , Dijit 中存放的是 Dojo 所有的Widget 组件,而 DojoX 则是一些扩展或试验功能,DojoX 中的试验功能在...
这是Dojo 1 TypeScript键入(包括Dijit和DojoX)的存储库。 当前,该存储库不包括Dijit和DojoX的所有类型,尽管Dojo目前已被全面介绍。 目的是覆盖Dijit的所有内容,并继续接受社区对DojoX的贡献。 对于其他...
很不错的中文教程!文件太大分3个包! 目录如下: dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) ...利用Dojo实现拖动(Drag and Drop)效果
我一直无法找到可用的 Dojo/Dijit 按钮图标图像及其各自类的,所以我编译了。 常规图标的使用如下所示: <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass: 'NAME_OF_CLASS'" type=...
分三个包上传时,第三个包好像传不上去,我给整合了一下,打在一个包里上传了! dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 ...利用Dojo实现拖动(Drag and Drop)效果
很不错的中文教程!文件太大分3个包! 目录如下: dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) ...利用Dojo实现拖动(Drag and Drop)效果
5个例子,为: 基础树 后台读取 分级 拖曳 数据库读取并存储 有些例子是基于 php 的
很不错的教程!文件太大分三个包上传的! 目录如下: dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 ...利用Dojo实现拖动(Drag and Drop)效果
2.3 Adding Dojo and Dijit to a Page . . . . 22 2.4 Laying Out the Form 26 2.5 Improved Form Controls . . . 31 2.6 Wrapping It Up . . . 34 3 Connecting to Outside Services 37 3.1 Dojo Remote Scripting ...
DIJIT X拥有DIJIT和 dojo X 所没有的东西! 开放、免费并由的好人带给您。 ##小部件###Fieldset 这是一个将引入 Dojo 的小部件。 ###AutofillCheckBox Dijit CheckBox的扩展,用于使用另一组 Dijit 小部件的值自动...
如何使用dojo的digit组件, dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.form.ValidationTextBox"); dojo.require("dijit.form.DateTextBox");
dojo dijit 小部件开发,将两个 Button 和一个 FilteringSelect 进行组合构成一个新的部件,便于开发部署,减少代码量.
深刻剖析Dojo工作原理,Dojo之父执笔的权威之作,国内权威社区DOJO中国组织翻译。 Doio是一个功能强大的面向对象开源JavaScript工具包,它为开发新一代Web程序提供了一套完整的小部件和一些特效,得到了IBM、Sun、...