1、通用方法
dijit/form/SimpleTextarea ：大量文字输入，一个基本的textarea
dijit/form/Textarea ：一个扩展dijit/form/SimpleTextarea动态增加或减少其高度
dijit/form/NumberTextBox或dijit/form/NumberSpinner：输入是数字，确保输入一个文本框，dijit/form/NumberSpinner提供扩展dijit/form/NumberTextBox逐步改变值的按钮
dijit/form/DateTextBox ：输入是日期，一个文本框，其中包括一个弹出日历
dijit/form/TimeTextBox ：输入是时间，一个文本框，其中包括一个弹出时间选择器
dijit/form/CurrencyTextBox ：输入是货币，一个扩展dijit/form/NumberTextBox本地化货币
dijit/form/ValidationTextBox：一个基本的验证能力，可以进一步定制
如果你要使用dijit/form/DateTextBox或dijit/form/TimeTextBox ，你将需要有主题的CSS引入并设置body元素的css样式。
--申明方式：
<!DOCTYPEhtml> <html> <head> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <script>dojoConfig={parSEOnLoad:true}</script> <scriptsrc='dojo/dojo.js'></script> <script> require(["dojo/parser","dijit/form/TextBox","dojo/domready!"]); </script> <title>TextBox</title> </head> <bodyclass="claro"> <labelfor="firstname">Auto-trimming,Proper-casingTextBox:</label> <inputtype="text"name="firstname"value="testingtesting" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true,propercase:true"id="firstname"/> </body> </html>
结果：
--编程方式
<!DOCTYPEhtml> <html> <head> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <script>dojoConfig={parSEOnLoad:true}</script> <scriptsrc='dojo/dojo.js'></script> <script> require(["dijit/form/TextBox","dojo/domready!"],function(TextBox){ varmyTextBox=newdijit.form.TextBox({ name:"firstname",value:""/*nooremptyvalue!*/,placeHolder:"typeinyourname" },"firstname"); }); </script> <title>TextBox</title> </head> <bodyclass="claro"> <inputid="firstname"/> </body> </html>
结果：
注意：placeHolder和value属性的区别，placeHolder在输入框处入焦点时文字会消失，而value不会。
<!DOCTYPEhtml> <html> <head> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <script>dojoConfig={parSEOnLoad:true}</script> <scriptsrc='dojo/dojo.js'></script> <script> require(["dojo/parser","dijit/registry","dojo/on",function(parser,registry,on){ parser.parse(); varBox0=registry.byId("value0Box"); varBox1=registry.byId("value1Box"); Box1.set("value",Box0.get("value")+"modified"); on(Box0,"change",function(){ Box1.set("value",Box0.get("value")+"modified"); }); }); </script> <title>TextBox</title> </head> <bodyclass="claro"> <labelfor="value0Box">AtextBoxwithavalue:</label> <inputid="value0Box"data-dojo-type="dijit/form/TextBox" value="Somevalue" data-dojo-props="intermediateChanges:true"></input> <br> <labelfor="value1Box">AtextBoxsetwithavaluefromtheabovetextBox:</label> <inputid="value1Box" data-dojo-type="dijit/form/TextBox"></input> <br> </body> </html>
--综合应用：
<!DOCTYPEhtml> <html> <head> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <script>dojoConfig={parSEOnLoad:true}</script> <scriptsrc='dojo/dojo.js'></script> <script> //loadrequirementsfordeclarativewidgetsinpagecontent require(["dijit/form/NumberTextBox","dijit/form/CurrencyTextBox","dijit/form/TimeTextBox","dijit/form/DateTextBox",function(NumberTextBox,CurrencyTextBox,TimeTextBox,DateTextBox){ varnumber=newNumberTextBox({ value:54,required:true },"number"); number.startup(); varcurrency=newCurrencyTextBox({ value:54775.53,required:true,constraints:{fractional:true},currency:"CNY",invalidMessage:"无效值." },"currency"); currency.startup(); vartime=newTimeTextBox({ constraints:{ timePattern:"HH:mm:ss",clickableIncrement:"T00:15:00",visibleIncrement:"T00:15:00",visibleRange:"T01:00:00" },invalidMessage:"Invalidtime." },"time"); time.startup(); vardate=newDateTextBox({ value:newDate(2011,8,15) },"date"); date.startup(); }); </script> <title>TextBox</title> </head> <bodyclass="claro"> <h1>dijit/form/NumberTextBox,dijit/form/CurrencyTextBox,dijit/form/TimeTextBox,dijit/form/DateTextBox</h1> <div> <labelfor="number">Age:</label> <inputid="number"> </div> <div> <labelfor="currency">AnnualSalary:</label> <inputid="currency"> </div> <div> <labelfor="time">StartTime:</label> <inputid="time"> </div> <div> <labelfor="date">StartDate:</label> <inputid="date"> </div> </body> </html>
结果:
2、 dijit/form/ValidationTextBox
Extends: dijit/form/TextBox，利用required属性指定字段必填，regExp属性指定字段验证规则。
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:ValidateTextBox</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script> <styletype="text/css"> label{ display:inline-block; width:140px; } </style> <script> require(["dojo/parser","dijit/form/ValidationTextBox"]); </script> </head> <bodyclass="claro"> <labelfor="zip">Also5-DigitU.S.Zipcodeonly:</label> <inputtype="text"id="zip"name="zip"value="00000"required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'\\d{5}',invalidMessage:'Invalidzipcode.'"/> </body> </html>
输出：
3、 dijit/form/ComboBox
Extends: dijit/form/ValidationTextBox,dijit/form/ComboBoxMixin。ComBoxBox包含可选值的下拉列表，另外还可以手工输入。
| 属性 | 属性类别 | 描述 |
| autoComplete | Boolean true |
判断是否自动完成用户输入的内容。当值为真时，用户输入部分字符串，ComboBox widget 会把能匹配上的可选值列出，如果光标离开此 widget，会显示第一个匹配的选项值。 |
| hasDownArrow | 判断是否现实下拉按钮。 | |
| ignoreCase | 判断是否忽略大小写（针对英文的输入）。 | |
| pageSize | Integer Infinity |
此属性可以设置下拉列表显示的条数，如果出现多页的情况，会在下拉列表中显示” PrevIoUs choices ”和” More choices ”按钮。用户可以通过点击这两个按钮来查找选项。 |
| query | Object {} |
设置查询表达式以过滤’ store ’里的选项。 |
| searchAttr | String name |
设置查找的匹配表达式 |
| searchDelay | boolean true |
当用户输入内容后到 Dojo 开始查找用户输入值的匹配项之间的间隔时间。 |
| store | Object | 数据提供对象的一个引用。 .Dijit 中一般应用 JSON 格式的数据。 |
--编程方式样例：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:ComboBox</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script> <styletype="text/css"> label{ display:inline-block; width:140px; } </style> <script> require([ "dojo/store/Memory","dijit/form/ComboBox","dojo/domready!" ],function(Memory,ComboBox){ varstateStore=newMemory({ data:[ {name:"Alabama",id:"AL"},{name:"Alaska",id:"AK"},{name:"AmericanSamoa",id:"AS"},{name:"Arizona",id:"AZ"},{name:"Arkansas",id:"AR"},{name:"ArmedForcesEurope",id:"AE"},{name:"ArmedForcesPacific",id:"AP"},{name:"ArmedForcestheAmericas",id:"AA"},{name:"California",id:"CA"},{name:"Colorado",id:"CO"},{name:"Connecticut",id:"CT"},{name:"Delaware",id:"DE"} ] }); varcomboBox=newComboBox({ id:"stateSelect",name:"state",value:"California",store:stateStore,searchAttr:"name" },"stateSelect"); }); </script> </head> <bodyclass="claro"> <inputid="stateSelect"> <p><buttononClick="alert(dijit.byId('stateSelect').get('value'))">Getvalue</button></p> </body> </html>
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:ComboBox</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/form/ComboBox"]); </script> </head> <bodyclass="claro"> <selectdata-dojo-type="dijit/form/ComboBox"id="fruit"name="fruit"> <option>Apples</option> <optionselected>Oranges</option> <option>Pears</option> </select> </body> </html>
--select样例：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:ComboBox</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dojo/store/Memory"]); </script> </head> <bodyclass="claro"> <divdata-dojo-type="dojo/store/Memory" data-dojo-id="stateStore" data-dojo-props="data:[{id:'y',name:'yes'},{id:'n',name:'no'}]"></div> <inputdata-dojo-type="dijit/form/ComboBox" value="yes" data-dojo-props="store:stateStore,searchAttr:'name'" name="state" id="stateInput"/> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
