Checkboxes
Checkboxes are used when there are multiple lists of options and user may select any number of choices, including zero, one, or more. Each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.
C heck boxes are the same as html but dojo provides more controls and styling options than a conventional check box. The checkbox contains Boolean types value either 'true ' or 'false '. The following example creates a Checkbox:
Here is the code of Program:
<html>
<head>
<title>checkbox</title>
<!-- check box -->
<script type= "text/javascript" >
dojo.require ( "dojo.parser" ) ;
dojo.require ( "dijit.form.CheckBox" ) ;
</script>
</head>
<body>
<h2>Check box</h2>
<input id= "cb" dojotype= "dijit.form.CheckBox" name= "developer"
checked= "checked" value= "on" type= "checkbox" />
<label for = "cb" > Are you a Developer </label>
</body>
</html>
Radio buttons
The RadioButton class is declared in the CheckBox.js file , hence you need dojo.require(dijit.form.CheckBox) for RadioButtons to work.
Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly only one choice from a group of radio button. Click a non-selected radio button will deselect whatever other button was previously selected in the list.
Radio Buttons are the same as html but dojo provides more controls and styling options than a conventional Radio button. The radio button also contains Boolean types value either 'true ' or 'false '. The following example creates a Radio buttons:
Here is the code of Program:
<html>
<head>
<title>Radio</title>
<!-- radio -->
<script type= "text/javascript" >
dojo.require ( "dojo.parser" ) ;
dojo.require ( "dijit.form.*" ) ;
</script>
</head>
<body>
<h2>Radio button</h2>
<input dojoType= "dijit.form.RadioButton" id= "val1" name= "group1"
checked= "checked" value= "Programmer" type= "radio" />
<label for = "val1" > Programmer </label>
<input dojotype= "dijit.form.RadioButton" id= "val2" name= "group1"
value= "Designer" type= "radio" />
<label for = "val2" > Designer </label>
<input dojotype= "dijit.form.RadioButton" id= "val3" name= "group1"
value= "Developer" type= "radio" />
<label for = "val3" > Developer </label>
</body>
</html>
Combo Box:
A combo box is a graphical user interface that controls GUI element. It is a combination of a drop-down list or list box and a single-line textbox
, allowing the user either to type a value directly into the control or choose from the list of options.
Here is the code of Program:
<html>
<head>
<title>combobox</title>
<!-- combo box -->
<script type= "text/javascript" >
dojo.require ( "dojo.parser" ) ;
dojo.require ( "dijit.form.ComboBox" ) ;
function setVal1 ( value ) {
console.debug ( "Selected " +value ) ;
}
</script>
</head>
<body>
<h2>Combo box</h2>
<select name= "country" dojoType= "dijit.form.ComboBox"
autocomplete= "false" value= "country"
onChange= "setVal1" >
<option>India</option>
<option>California</option>
<option >Illinois</option>
<option >New York</option>
<option >Texas</option>
</select>
</body>
</html>
Auto Completer:
The Auto Completer provides the front-end logic for text-entry suggestion and completion functionality. The features of the auto completer to control navigation of the suggestions container via up/down arrow keys and rich event model . Easily to configure its included parameters and custom formatting of auto completer suggestions, query delimiters (Multiple selections per input box), configurable query delay, type-ahead, animation of suggestions container, built-in query caching and much more.
The Combo Box is a hybrid between the combo box and text field. It provides a list of acceptable values. This is good for open-ended multiple choice questions. Rather than having two fields - a combo box and an Other text box - you can use just one field.
Here is the code of Program:
<html>
<head>
<title>Auto Completer Combo</title>
<style type= "text/css" >
@import "../resources/dojo.css" ;
@import "../dijit/themes/tundra/tundra.css" ;
</style>
<script type= "text/javascript" src= "dojo.xd.js"
djConfig= "parseOnLoad: true" ></script>
<!-- combo box -->
<script type= "text/javascript" >
dojo.require ( "dojo.parser" ) ;
dojo.require ( "dijit.form.FilteringSelect" ) ;
</script>
</head>
<body class = "tundra" >
<h2>Auto Completer Combo box</h2>
<select dojoType= "dijit.form.FilteringSelect" name= "sname"
autocomplete= "false" value= "Vinod" >
<option value= "Vinod" >Vinod</option>
<option value= "Vikash" >Vikash</option>
<option value= "Deepak" >Deepak</option>
<option value= "DeepakSir" >Deepak Sir</option>
<option value= "Arun" >Arun</option>
<option value= "Amar" >Amar</option>
<option value= "Aman" >Aman</option>
</select>
</body>
</html>
InlineEditBox
InlineEditBox describes a widget wrapper that takes a child widget declared in markup and makes it inline-editable. This widget performs the role as a <div> tag when not in edit mode. When you click widget text then it open as an editable mode. In this mode, you edit the text and save it. Whenever you don't save the editable text then it can't be save so, after editing the text you must have to save it. Without editing text you can't be save it.
Here is the code of Program:
<html>
<head>
<title>InlineEdit Demo</title>
<style type= "text/css" >
@import "../resources/dojo.css" ;
@import "../dijit/themes/tundra/tundra.css" ;
</style>
<script type= "text/javascript" src= "dojo.xd.js"
djConfig= "parseOnLoad: true" ></script>
<script type= "text/javascript" >
dojo.require ( "dojo.parser" ) ;
dojo.require ( "dijit.form.InlineEditBox" ) ;
dojo.require ( "dijit.form.Textarea" ) ;
</script>
</head>
<body>
Edit Please:<br>
<p id= "areaEditable" dojoType= "dijit.form.InlineEditBox"
renderAsHtml= "true" autoSave= "false" >
<textarea dojoType= "dijit.form.Textarea" >
vinod
</textarea>
</p>
</body>
The following code is the InlineEditBox that edits date of dijit.form.DateTextBox save it automatically. The inner textarea tag is the Textarea widget . When a user run this code then they see the paragraph of rich text. If user clicks the text, the plain text appears in paragraph. If you want to change the value then click the date text and select the appears date.
The InlineEditBox has methods get/setDisplayedValue , inline. The following code shows the DateTextBox that makes inline in HTML
.Here is the code of program:
<html>
<head>
<title>InlineEdit Date Demo</title>
<style type= "text/css" >
@import "../resources/dojo.css" ;
@import "../dijit/themes/tundra/tundra.css" ;
</style>
<script type= "text/javascript" src= "dojo.xd.js"
djConfig= "parseOnLoad: true" ></script>
<script type= "text/javascript" >
dojo.require ( "dojo.parser" ) ;
dojo.require ( "dijit.form.InlineEditBox" ) ;
dojo.require ( "dijit.form.DateTextBox" ) ;
</script>
</head>
<body class = "tundra" >
<p id= "backgroundArea" dojoType= "dijit.form.InlineEditBox" >
<input name= "date" value= "2005-12-30" dojoType= "dijit.form.DateTextBox"
constraints= { datePattern: ' MM/dd/yy '}
lang= "en-us"
required= "true"
promptMessage= "mm/dd/yy"
invalidMessage= "Invalid date. Please use mm/dd/yy format." >
</body>
</html>
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
