Dojo学习笔记（十三）：Dojo表单控件――TextBox及其变体

1、通用方法

dijit/form/TextBox ：一个基本的文本框

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不会。

--使用set()方法和get()方法：

<!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。ComBox Box包含可选值的下拉列表，另外还可以手工输入。

属性	属性类别	描述
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>

Dojo学习笔记（十三）：Dojo表单控件――TextBox及其变体

猜你在找的Dojo相关文章