您的位置：首页 > 其它

Dojo widgets introduction and sample code (1)

2009-10-11 10:56 405 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航