正如“认识Dojo中的界面控件”一文中提到的,Dijit库提供了一整套极其强大且灵活的基于Dojo的小部件(Widget),帮助你很方便地增强Web应用的界面和功能。这些小部件包括下拉菜单、弹出菜单、对话框、页面布局、树、进度条、以及表单元素。很显然Dijit让这些控件变得很漂亮,但本文所关注的是它们增强的功能,尤其是对一个基本表单在可用性和有效性方面的增强。
Dijit实现的快速回顾 要在一个页面中使用Dijit所要做的第一件事情就是引入Dojo:
- <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js.uncompressed.js"djConfig="isDebug:true,parSEOnLoad:true"></script>
第二步是导入Dijit的主题样式表:
最后一步就是为BODY元素的class属性设置一个主题名:
bodyclass="claro"
增强基本表单元素 注意:本文将使用声明的方法创建小部件。你也可以用编程的方法创建任何部件,参见“认识Dojo中的界面控件”中的dojo.behavior。 增强我们的静态表单的第一步是增强表单元素自身。Dijit为每一种表单元素都提供了至少一种(有时有2-3种)对应了小部件。使用Dijit小部件的声明式创建法,以及dojoType属性,我们很快就能将静态表单中的每一样东西都变成小部件。在version1.9 中dojoType等价于data-dojo-type
form action="process.php"method="get">
- <!–textinputs:dijit.form.TextBox–>
- b>FirstName: inputtype="text"name="firstName"placeholder="YourName"id="firstName"dojoType="dijit.form.TextBox"/>
- >Website:inputtype="text"name="website"placeholder="YourWebsite"id="website"dojoType="dijit.form.TextBox" <!–radiobuttons:dijit.form.FilteringSelect–>FavoriteColor:selectname="color"id="color"dojoType="dijit.form.FilteringSelect"optionvalue="">SelectaColoroptionoptionvalue="Red">Redoptionvalue="Green">Greenoptionvalue="Blue">Blueselect <!–radiobuttons:dijit.form.CheckBox–>SendEmails?inputtype="checkbox"id="checkbox"checked="checked"dojoType="dijit.form.CheckBox"/>
- <!–radiobuttons:dijit.form.RadioButton–>EmailFormat:inputtype="radio"id="radio1"name="format"checked="checked"dojoType="dijit.form.RadioButton"labelfor="radio1">HTMLlabel
- inputtype="radio"id="radio2"name="format"dojoType="dijit.form.RadioButton"labelfor="radio2">Text <!–submitbutton:dijit.form.Button–inputtype="submit"value="SubmitForm"label="SubmitForm"id="submitButton"dojoType="dijit.form.Button"form>
好啦,现在我们这些静态的、有点乏味的表单元素已经披上了主题的外衣,而且还具备了更多的功能。关于我们创建的这些小部件,有以下几点需要说明:
- FilteringSelect小部件在以下几个方面具有与原生的SELECT元素相同的功能:
- 初始选中具有selected属性的选项
- 选项集合是固定的,由OPTION元素的value属性及其文本所决定
- 允许键盘操作
- FilteringSelect小部件在原生SELECT元素的基础上添加了如下功能:
- 可以在FilteringSelect的输入框中键入字符,自动完成功能会帮你自动匹配选项。
- 如果输入的值不在选项集合中,用户将看到一条错误提示信息。
- 你将对控件的显示具有更多的控制权。
- Dojo1.5为INPUT元素新加了占位文本功能,因此你再也不用通过手工响应focus/blur事件来完成相同的功能了。
现在既然基本表单都已经变成小部件了,而且也具有了漂亮的主题,我们可以添加基本的输入验证功能了。 用Dojo实现表单验证 就像几乎所有的其他客户端问题一样,针对表单验证Dojo也提供了一套非常好的解决方案。 而且幸运的是,对于基本的表单验证,只涉及到少数几个关键的组件。 dijit.form.ValidationTextBox 对一个表单进行验证的前提之一,是决定哪些元素是必须的。假设第一个输入域是必须的,我们只需要将这个部件的dojoType从dijit.form.TextBox改成dijit.form.ValicationTextBox:
inputdojoType="dijit.form.ValidationTextBox"required="true"placeholder="YourName"missingMessage="Ooops!Youforgotyourfirstname!"name="firstName"id="firstName"type="text"/>
由于
required="true"已经加到这个小部件中,一旦用户忘了在输入框中填入任何字符,一个错误图标以及一条提示信息就会显示出来。你可以通过设置
missingMessage属性来配置提示信息的内容,否则的话将显示一条通用的错误信息。
如果这个输入框要求对输入的模式进行特殊的验证呢?那就是regExp属性的用武之地了:
copy
inputdojoType="dijit.form.ValidationTextBox"required="true"regExp="(https?|ftp)://[A-Za-z0-9-_]+/.[A-Za-z0-9-_%&/?///.=]+"name="website"placeholder="YourWebsite"id="website"type="text"/>
现在这个website输入框不仅要求必须有输入,
而且输入的内容必须能够通过regExp属性的检测。
dojox.validate提供的验证工具
dojox.validate库包含了一大堆工具函数和正则表达式,用于验证表单元素的值。这些验证函数可以用于电子邮件地址、URL、电话号码、邮政编码等等许多东西。下面是一个在ValidationTextBox上使用dojox.validate的例子:
copy
scripttype="text/javascript" dojo.require("dojox.validate");
- dojo.require("dojox.validate.web");
- strong
>Email:inputtype="text"required="true"name="email"id="email"dojoType="dijit.form.ValidationTextBox"validator="dojox.validate.isEmailAddress"/>
validator属性是一个指向电子邮件验证函数的引用。如果你不擅长正则表达式dojox.validation就变得非常有用了。这里面还包含了特定于语言的工具包。其API文档提供了dojox.validate工具的完整列表。
dijit.form.Form及其onSubmit事件
现在我们已经设置好了必须的输入域,接下来我们将用dijit.form.Form这个dojoType来增强最外面的这个form元素。 与dijit.form.Form结伴出现的是一个特殊的script元素。这个只用于Dojo的script元素是一个this.validate()测试,作用于dijit.form.Form实例。这个测试将为所有require="true"的元素进行验证。你也可以在这里添加你自己的验证代码。
copy
formdojoType="dijit.form.Form"action="process.php"method="get"scripttype="dojo/method"event="onSubmit" <!–
- if(this.validate()){
- alert(’Formisvalid,submitting!’);
- }else{
- alert(’Formcontainsinvalid.Pleasecompleteallrequiredfields.’);
- returnfalse;
- }
- returntrue;
- – <!–formfieldshere–>
dijit.form工具集
在上边的例子里,我只涉及了最常使用的Dijit部件。Dijit里还有更多更为强大的表单控件。让我们来看看另外几个很有用的小部件。
DateTextBox
要求用户正确地格式化一个日期将是一场噩梦,尤其当其他表单元素依赖于这个日期域的值的时候。
Dijit提供了一个dijit.form.DateTextBox类,它将显示一个用户友好的日历控件让用户选择日期。
copy
<!–whentheuserfocusesonthiselement,thecalendarappears–inputdojoType="dijit.form.DateTextBox"required="true"invalidMessage="Pleaseprovideavaliddate."type="text"name="date"id="date"/>
CurrencyTextBox
dijit.form.CurrencyTextBox类帮助用户根据地区设置正确地格式化并验证货币值。
copy
<!–{fractional:true}meansyoumustprovidecents–inputdojoType="dijit.form.CurrencyTextBox"required="true"constraints="{fractional:true}"currency="USD"invalidMessage="Pleaseprovidebothdollarsandcents."type="text"name="weekly_wages"id="weekly_wages"value="2000"/>
Textarea
dojox.form.Textarea类增强了TEXTAREA元素,从而当用户输入的时候能够自动改变高度。
copy
textareadojoType="dijit.form.Textarea"name="comments">
利用DojoX的替代部件增强基本的Dijit部件
DojoX包含了大量的增强的控件,它们和与许多Dijit部件一样好用,而且还解决了许多Dijit部件无法解决的问题。下面介绍几个著名的DojoX表单部件。
BusyButton
dijit.form.Button的确很好用,但如果我希望禁用这个按钮(避免重复提交)并在用户单击的时候提供一个反馈信息(例如“正在提交表单……”)呢?
我们可以用dojox.form.BusyButton做到这些:
copy
<!–assumingdojox.form.BusyButtonhasbeenrequired…–buttondojoType="dojox.form.BusyButton"busyLabel="SendingData…" SendData
- button
>
CheckedMultiSelect
如何让我们的SELECT元素允许多选?
这是一个使用dojox.form.CheckedMultiSelect部件的好机会:
copy
<!–assumingdojox.form.CheckedMultiSelecthasbeenrequired…–selectmultiple="true"name="rockers"dojoType="dojox.form.CheckedMultiSelect"optionvalue="Oasis">Oasisoptionvalue="RodStewart"selected="selected">RodStewartoptionvalue="Coldplay"selected="selected">Coldplayoptionvalue="KingsofLeon">KingsofLeon>
PasswordValidator
如果我们的网站需要一个允许修改密码的表单怎么办?
dojox.form.PasswordValidator提供了所有拟需要的功能来快速实现它:
copy
<!–assumingdojox.form.PasswordValidatorhasbeenrequired…– <!–pwValidateisthenameofyourfunctionthatverifiesthecurrentpasswordiscorrect–divdojoType="dojox.form.PasswordValidator"name="pwValidate" <!–pwType=oldiswheretheusermustplacetheircurrentpassword–inputtype="password"pwType="old" <!–pwType=newiswheretheproposednewpasswordmustbeplaced–inputtype="password"pwType="new" <!–pwType=newiswheretheuserverifiestheirnewpass–inputtype="password"pwType="verify"div>
注意:
javascript验证并非服务器端验证的替代品。javascript只是通过提供即时响应来增强用户体验。
FileUploader
没有使用任何增强的文件上传控件可能是最差的一种表单控件。dojox.form.FileUploader提供了一个绝佳的解决方案,使上传的过程更为合理。
<!–assumingdojox.form.FileUploaderhasbeenrequired…–divclass="uploadBtn"dojoType="dojox.form.FileUploader"hoverClass="uploadHover"pressClas="uploadPress"activeClass="uploadBtn"disabledClass="uploadDisable"uploadUrl="/upload-files.php">SelectFiles>
dojox.form工具集
dojox.form名字空间包含了大量的增强部件,包括:
- BusyButton 具有特殊的禁用/忙碌标签的按钮
- CheckedMultiSelect 把你的具有“multiple”属性的SELECT元素变成一系列CheckBox的利器
- DropDownStack 通过简单的选择来启用/禁用表单元素
- RangeSlider 通过滑动滑块来选择值
- Rating 方便地创建打分控件(星级打分)
- ……以及更多其他东西!
小结
Dijit库不仅仅让你的界面元素变得光彩照人,它更是一个能让你、开发者、以及你的用户的生活都更美好一些的庞大工具集。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|