Demo
You can set dojo form CSS using "data-dojo-type"
for example:
data-dojo-type="dijit/form/TextBox"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-type="dijit/form/Button"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-type="dijit/form/NumberTextBox"
data-dojo-type="dijit/form/CurrencyTextBox"
data-dojo-type="dijit/form/TimeTextBox"
and here are the effect!
<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" />
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>
</head>
<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="textBox"> textBox:</label>
<input type="text" id="textBox" name="textBox" data-dojo-type="dijit/form/TextBox" />
</div>
<div>
<label for="dateTextBox">Date Example:</label>
<input type="text" id="dateTextBox" name="dateTextBox" data-dojo-type="dijit/form/DateTextBox" />
</div>
<div>
<label for="Example">Number Example:</label>
<input type="text" id="Example" required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'[\\w]+', invalidMessage:'Invalid Non-Space Text.'" />
</div>
<div>
<button data-dojo-type="dijit/form/Button" onclick="alert()">Search</button>
</div>
<script>
// load requirements for declarative widgets in page content
require(["dijit/form/NumberTextBox", "dijit/form/CurrencyTextBox", "dijit/form/TimeTextBox", "dijit/form/TextBox", "dijit/form/DateTextBox", "dijit/form/Button", "dojo/parser", "dojo/domReady!"]);
</script>
</body>
</html>
No comments:
Post a Comment