Dojo widgets introduction and sample code (4)
2009-10-12 11:38
483 查看
FilteringSelect
:
The FilteringSelect is same as html
select tag, but it populated dynamically. It
works to user
friendly with large data set. It loads the data on the page which
have to be needed. It looks as a combo box but the combo box do not allow
to user to enter the outside of data in the combo box. It allows only the
selection facility. But filteringselect allows to user to enter your text in
the filteringselect.
Here is the code of Program:
FisheyeLite:
The dojox.widget
.FisheyeLite widget
set on the anchor tags. We use the dojo query for selecting the anchor
tags
and
FisheyeLite widget is used to create for each tag. If your mouse pointer over
the anchor tag text then the text size (Increasable to your requirement) is automatically
large according to your requirement.
Here is the code of Program:
Google Blog Search
implement the
google
blog search. That means user enter your text that have to be searched.
This program search all content related to blog in the site. If you click on the
filtered data then you go the specific blog site. And do your word.
Here is the code of program:
Google Web Search
In this section, you will learn how to implement the
google web search. That means user enter your text that have to be searched.
This program search all content related to its. If you click on the
filtered data then you get the specific data.
Show and hide
dialog
.
In the following example, you will see there are two method that are
used for showing and hiding the dialog box.
show(): This method is used to display the dialog
box.
hide(): This method is used to hide the dialog box.
SplitContainer:
This is also a container that
contains multiple children
widgets. All are displayed side by side (horizontally
or
vertically
). There is a bar between each of the children, and you can adjust the relative size of each child
by dragging the bars. You must specify
the size (width
and height
) for the dojo SplitContainer.
Code example:
TitlePane:
A TitlePane is a pane that contains a title
on the top. Which can be opened and collapsed. If an arrow button is left to
right then the tilepane is collapsed and top to bottom then it is opened. In
opened format you can see the all contents that has TitlePane. If you enter the
title of titlePane then you enter the title
tag
.
Tooltipsdialog
.
If you click on the "Change Password" command
button the you get a dialog
box
under this command button. Similarly, you get
the whenever, you click on the the "Forgot Password" command button
the you get a dialog box under this command button.
TimeSpinner
.
This is same as the dojo NumberSpinner
. But the NumberSpinner only worked
on the an integer type data. That means you increase and decrease an integer
number. Similarly the TimeSpinner button provides you to increase and decrease
the time through the TimeSpinner button in AM and PM. If you enter before 12:00
then it displays the time in AM and after 12:00 it displays the time in PM.
:
The FilteringSelect is same as html
select tag, but it populated dynamically. It
works to user
friendly with large data set. It loads the data on the page which
have to be needed. It looks as a combo box but the combo box do not allow
to user to enter the outside of data in the combo box. It allows only the
selection facility. But filteringselect allows to user to enter your text in
the filteringselect.
Here is the code of Program:
<html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <title>Simple FilterSelect Example</title> <style type= "text/css" > @import "../dijit/themes/soria/soria.css" ; @import "/resources/dojo.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.FilteringSelect" ) ; </script> </head> <body class = "soria" > <select dojoType= "dijit.form.FilteringSelect" name= "countryName" autocomplete= "true" value= "sel" > <option value= "sel" selected= "selected" >Austria</option> <option value= "1" >Australia</option> <option value= "2" >Canada</option> <option value= "3" >Germany</option> <option value= "4" >Japan</option> <option value= "5" >United Kingdom</option> <option value= "6" >United States of America</option> <option value= "7" >Afghanistan</option> <option value= "8" >Albania</option> <option value= "9" >Algeria</option> <option value= "10" >American Samoa</option> <option value= "11" >Andorra</option> <option value= "12" >Angola</option> </select> </body> </html>
FisheyeLite:
The dojox.widget
.FisheyeLite widget
set on the anchor tags. We use the dojo query for selecting the anchor
tags
and
FisheyeLite widget is used to create for each tag. If your mouse pointer over
the anchor tag text then the text size (Increasable to your requirement) is automatically
large according to your requirement.
Here is the code of Program:
<html>
<head>
<title>Fish Eye Light Anchor tag Example</title>
<style type=
"text/css"
>
@import
"../dijit/themes/soria/soria.css"
;
@import
"/resources/dojo.css"
;
</style>
<script type=
"text/javascript"
src=
"dojo.js"
djConfig=
"parseOnLoad: true"
></script>
<script type=
"text/javascript"
>
dojo.require
(
"dojox.widget.FisheyeLite"
)
;
dojo.addOnLoad
(
function
(){
dojo.query
(
"a"
, dojo.byId
(
"myParagraph"
))
.forEach
(
function
(
n
){
new
dojox.widget.FisheyeLite
({
properties:
{
fontSize:
1.50
,
letterSpacing:
2.00
}
}
,n
)
;
})
.connect
(
"onclick"
,dojo,
"stopEvent"
)
;
})
;
</script>
</head>
<body
class
=
"soria"
>
<p id=
"myParagraph"
>
This tips is light towards people with some <a href=
"#"
>JavaScript </a>
knowledge, priestly used another <a href=
"#"
>JavaScript
(
Ajax
)
</a>
framework before, now have a real need to use some of the features found
in dojo. In
this
tips, learn about the dojo and its <a href=
"#"
>directory structure </a>.
The purpose of
this
tips,
for
a
new
user learn to dojo then you need to know about the
<a href=
"#"
>what is dojo </a>and its <a href=
"#"
>directory structure</a>.
</p>
</body>
</html>Google Blog Search
implement the
blog search. That means user enter your text that have to be searched.
This program search all content related to blog in the site. If you click on the
filtered data then you go the specific blog site. And do your word.
Here is the code of program:
<html>
<head>
<title>Dojo Google Blog Search Store Example</title>
<style type=
"text/css"
>
@import
"../dijit/themes/soria/soria.css"
;
@import
"/resources/dojo.css"
;
</style>
<script type=
"text/javascript"
src=
"dojo.js"
djConfig=
"parseOnLoad: true"
></script>
<script type=
"text/javascript"
>
dojo.require
(
"dojox.data.GoogleSearchStore"
)
;
dojo.require
(
"dijit.form.Button"
)
;
function doSearch
() {
var queryString = dojo.byId
(
"searchText"
)
.value;
var store =
new
dojox.data.GoogleBlogSearchStore
()
;
var list = dojo.byId
(
"searchOutput"
)
;
dojo.byId
(
"content"
)
.innerHTML =
""
;
//Clean up previous searches
while
(
list.firstChild
){
list.removeChild
(
list.firstChild
)
;
}
store.fetch
({
query:
{
text: queryString
}
,
count:
8
,
onComplete: function
(
items, request
) {
//Print out the search results
as an unordered list
var delay =
0
;
dojo.forEach
(
items, function
(
item
){
var li = document.createElement
(
"li"
)
;
li.innerHTML =
"<a href=/""
+
store.getValue
(
item,
"postUrl"
)
+
"/">"
+
store.getValue
(
item,
"titleNoFormatting"
)
+
"</a>"
;
dojo.style
(
li,
"opacity"
,
"0"
)
;
list.appendChild
(
li
)
;
dojo.connect
(
li.firstChild,
"onclick"
, function
(
evt
){
var frame = dojo.byId
(
"content"
)
;
dojo.style
(
frame,
"display"
,
"block"
)
;
frame.src = store.getValue
(
item,
"postUrl"
)
;
dojo.stopEvent
(
evt
)
;
return false
;
})
//Fade in the results.
delay +=
500
;
dojo.fadeIn
({
node:li
})
.play
(
delay
)
;
})
;
}
})
;
}
</script>
</head>
<body
class
=
"soria"
>
<b>Please Enter your text
for
searching
: </b>
<input type=
"text"
size=
"20"
value=
""
id=
"searchText"
/>
<div dojoType=
"dijit.form.Button"
onclick=
"doSearch();"
>
<b>Search</b>
</div>
<div>
<ul id=
"searchOutput"
class
=
"link-list"
></ul>
</div>
<iframe id=
"content"
style=
"display:solid;width:100%;height:400px;"
></iframe>
</body>
</html>Google Web Search
In this section, you will learn how to implement the
google web search. That means user enter your text that have to be searched.
This program search all content related to its. If you click on the
filtered data then you get the specific data.
<html>
<head>
<title>Google Web Search Search Example</title>
<style type=
"text/css"
>
@import
"../dijit/themes/soria/soria.css"
;
@import
"/resources/dojo.css"
;
</style>
<script type=
"text/javascript"
src=
"dojo.js"
djConfig=
"parseOnLoad: true"
></script>
<script type=
"text/javascript"
>
dojo.require
(
"dojox.data.GoogleSearchStore"
)
;
dojo.require
(
"dijit.form.Button"
)
;
function doSearch
() {
var queryString = dojo.byId
(
"searchText"
)
.value;
var store =
new
dojox.data.GoogleWebSearchStore
()
;
var list = dojo.byId
(
"searchOutput"
)
;
//Clean up previous searches text
while
(
list.firstChild
){
list.removeChild
(
list.firstChild
)
;
}
store.fetch
({
query:
{
text: queryString
}
,count:
25
,onComplete: function
(
items, request
) {
//Print out the search results
as an unordered list
var delay =
0
;
dojo.forEach
(
items, function
(
item
){
var li = document.createElement
(
"li"
)
;
li.innerHTML =
"<a href=/""
+ store.getValue
(
item,
"url"
)
+
"/">"
+
store.getValue
(
item,
"title"
)
+
"</a>"
;
dojo.style
(
li,
"opacity"
,
"0"
)
;
list.appendChild
(
li
)
;
//Fade in the results.
delay +=
500
;
dojo.fadeIn
({
node:li
})
.play
(
delay
)
;
})
;
}
})
;
}
</script>
</head>
<body
class
=
"soria"
>
<table border=
"1"
cellpadding=
"0"
cellspacing=
"0"
width=
"600"
align=
"center"
>
<tr>
<td valign=
"top"
align=
"CENTER"
>
<b>Enter your search text:</b>
<input type=
"text"
size=
"20"
value=
""
id=
"searchText"
/>
<div dojoType=
"dijit.form.Button"
onclick=
"doSearch();"
>
<b>Search</b>
</div>
</td>
</tr>
<tr>
<td valign=
"top"
>
<ul id=
"searchOutput"
class
=
"link-list"
></ul>
</td>
</tr>
</tr>
</table>
</body>
</html>Show and hide
dialog
.
In the following example, you will see there are two method that are
used for showing and hiding the dialog box.
show(): This method is used to display the dialog
box.
hide(): This method is used to hide the dialog box.
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
/>
<title>Show and hide Dialog example</title>
<style type=
"text/css"
>
@import
"../dijit/themes/soria/soria.css"
;
@import
"/resources/dojo.css"
;
</style>
<script type=
"text/javascript"
src=
"dojo.js"
djConfig=
"parseOnLoad: true"
></script>
<script >
dojo.require
(
"dojo.parser"
)
;
dojo.require
(
"dijit.form.Button"
)
;
dojo.require
(
"dijit.Dialog"
)
;
dojo.require
(
"dijit.form.TextBox"
)
;
dojo.addOnLoad
(
showDialog
)
;
dojo.addOnLoad
(
hideDialog
)
;
function showDialog
() {
dijit.byId
(
'di
alog1
').
show
()
;
}
</script>
</head>
<body
class
=
"soria"
>
<div dojoType=
"dijit.Dialog"
id=
"dialog1"
title=
"Login"
>
<form action=
"Login"
method=
"post"
validate=
"true"
id=
"loginForm"
>
<table width=
"258"
>
<tr>
<td><label>Login</label></td>
<td><input type=
"text"
trim=
"true"
dojoType=
"dijit.form.TextBox"
value=
""
name=
"login"
id=
"userId"
/></td>
</tr>
<tr >
<td><label>Password</label></td>
<td><input type=
"password"
trim=
"true"
dojoType=
"dijit.form.TextBox"
value=
""
name=
"password"
id=
"password"
/></td>
</tr>
<tr><td colspan=
"2"
> </td></tr>
<tr>
<td colspan=
"2"
align=
"center"
>
<table width=
"100%"
border=
"0"
cellspacing=
"0"
cellpadding=
"0"
>
<tr>
<td align=
"center"
valign=
"top"
width=
"40%"
>
<!-- button ok -->
<button dojoType=
"dijit.form.Button"
type=
"submit"
id=
"LoginButton"
onClick=
"return validate();"
>Ok</button></td>
<td align=
"left"
valign=
"top"
width=
"3%"
> </td>
<td align=
"left"
valign=
"top"
width=
"46%"
>
<!-- button cancel -->
<button dojoType=
"dijit.form.Button"
type=
"submit"
onclick=
"document.Login.reset()"
id=
"Cancel"
>Cancel</button></td>
</td>
<td width=
"11%"
align=
"left"
valign=
"top"
> </td>
<td><button dojoType=
"dijit.form.Button"
type=
"submit"
onclick=
"showDialog();"
id=
"resetPassword"
> Show Dialog </button></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<!-- Forgot Password Form-->
<div dojoType=
"dijit.Dialog"
id=
"dialog2"
title=
"Forgot Password"
>
<form action=
"doResetPassword.action"
method=
"post"
validate=
"true"
id=
"resetPasswordForm"
>
<table width=
"308"
>
<tr>
<td colspan=
"2"
><label>Enter Login Name</label></td>
<td><input type=
"text"
trim=
"true"
dojoType=
"dijit.form.TextBox"
value=
""
name=
"userName"
id=
"userName"
/></td>
</tr>
<tr><td><B>Or</B></td></tr>
<tr>
<td colspan=
"2"
><label>Enter Your Email
Address</label></td>
<td><input type=
"text"
trim=
"true"
dojotype=
"dijit.form.TextBox"
value=
""
name=
"email"
id=
"email"
/></td>
</tr>
<tr>
<td align=
"right"
>
<button dojoType=
"dijit.form.Button"
type=
"submit"
onclick=
"validate1()"
id=
"reset"
>Ok </button></td>
<td align=
"right"
valign=
"top"
><button dojoType=
"dijit.form.Button"
type=
"submit"
onClick=
"hideDialog()"
id=
"cancel1"
>Hide Dialog </button> </td></tr>
</table>
</form>
</div>
<script>
function validate
(){
userId = document.getElementById
(
'us
erId
').
value
password = document.getElementById
(
'pa
ssword
').
value
errMsg=
" "
;
if
(
userId ==
""
){
errMsg +=
"Please enter User
Name/n"
;
}
if
(
password ==
""
){
errMsg +=
"Please enter Password"
;
}
if
(
errMsg!=
" "
){
alert
(
errMsg
)
;
return false
;
}
document.forms
[
'lo
ginForm
'].
submit
()
;
}
</script>
<script>
function showDialog
() {
dijit.byId
(
'di
alog1
').
hide
()
;
var dlg = dijit.byId
(
'di
alog2
');
dlg.show
()
;
}
function validate1
(){
userName = document.getElementById
(
'us
erName
').
value
email = document.getElementById
(
'em
ail
').
value
errMsg=
" "
;
if
(
userName ==
""
&& email ==
""
){
errMsg +=
"Please enter userName Or email address/n"
;
}
var reg = /^
([
A-Za-z0-
9
_/-/.
])
+/
@
([
A-Za-z0-
9
_/-/.
])
+/.
([
A-Za-z
]{
2
,
4
})
$/;
if
(
!
(
email ==
""
)){
if
(
reg.test
(
email
)
==
false
) {
errMsg+=
'In
valid Email Address
';
}
}
if
(
errMsg!=
" "
){
alert
(
errMsg
)
;
return false
;
}
document.forms
[
're
setPasswordForm
'].
submit
()
;
}
function hideDialog
(){
var dlg = dijit.byId
(
'di
alog2
');
dlg.hide
()
;
dijit.byId
(
'di
alog1
').
show
()
;
}
</script>
</body>
</html>SplitContainer:
This is also a container that
contains multiple children
widgets. All are displayed side by side (horizontally
or
vertically
). There is a bar between each of the children, and you can adjust the relative size of each child
by dragging the bars. You must specify
the size (width
and height
) for the dojo SplitContainer.
Code example:
<html> <head> <title>SplitContainer Example</title> <style type= "text/css" > @import "../dijit/themes/tundra/tundra.css" ; @import "resources/dojo.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.layout.SplitContainer" ) ; dojo.require ( "dijit.layout.ContentPane" ) ; </script> </head> <body class = "tundra" > <div dojoType= "dijit.layout.SplitContainer" orientation= "horizontal" sizerWidth= "10" activeSizing= "true" style= "border: 1px solid #FF00FF; width: 600px; height: 205px;" > <div dojoType= "dijit.layout.ContentPane" sizeMin= "10" sizeShare= "10" > <p><b>Introduction to Dojo and Tips</b></p> This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript ( Ajax ) framework before, now have a real need to use some of the features found in dojo. In this tips, learn about the dojo and its directory structure. </div> <div dojoType= "dijit.layout.ContentPane" sizeMin= "10" sizeShare= "10" > <p><b>Benefits of Dojo</b></p> * Associative arrays<br> * Loosely typed variables<br> * Regular expressions<br> * Objects and classes<br> * Highly evolved date, math, and string libraries<br> * W3C DOM support in the Dojo </div> </div> </body> </html>
TitlePane:
A TitlePane is a pane that contains a title
on the top. Which can be opened and collapsed. If an arrow button is left to
right then the tilepane is collapsed and top to bottom then it is opened. In
opened format you can see the all contents that has TitlePane. If you enter the
title of titlePane then you enter the title
tag
.
<html> <head> <title>Dojo TitlePane Example</title> <style type= "text/css" > @import "../dijit/themes/soria/soria.css" ; @import "/resources/dojo.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.TitlePane" ) ; </script> </head> <body class = "soria" > <div dojoType= "dijit.TitlePane" title= "<b>Welcome to Roseindia Dojo Tutorial</b>" > This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript ( Ajax ) framework before, now have a real need to use some of the features found in dojo. In this tips, learn about the dojo and its directory structure. The purpose of this tips, for a new user learn to dojo then you need to know about the what is dojo and its directory structure. </div> </body> </html>
Tooltipsdialog
.
If you click on the "Change Password" command
button the you get a dialog
box
under this command button. Similarly, you get
the whenever, you click on the the "Forgot Password" command button
the you get a dialog box under this command button.
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
/>
<title>Show and hide Dialog example</title>
<style type=
"text/css"
>
@import
"../dijit/themes/soria/soria.css"
;
@import
"/resources/dojo.css"
;
</style>
<script type=
"text/javascript"
src=
"dojo.js"
djConfig=
"parseOnLoad: true"
></script>
<script >
dojo.require
(
"dojo.parser"
)
;
dojo.require
(
"dijit.form.Button"
)
;
dojo.require
(
"dijit.Dialog"
)
;
dojo.require
(
"dijit.form.TextBox"
)
;
dojo.addOnLoad
(
showDialog
)
;
dojo.addOnLoad
(
hideDialog
)
;
function showDialog
() {
dijit.byId
(
'di
alog1
').
show
()
;
}
</script>
</head>
<body
class
=
"soria"
>
<div dojoType=
"dijit.Dialog"
id=
"dialog1"
title=
"Login"
>
<form action=
"Login"
method=
"post"
validate=
"true"
id=
"loginForm"
>
<table width=
"258"
>
<tr>
<td><label>Login</label></td>
<td><input type=
"text"
trim=
"true"
dojoType=
"dijit.form.TextBox"
value=
""
name=
"login"
id=
"userId"
/></td>
</tr>
<tr >
<td><label>Password</label></td>
<td><input type=
"password"
trim=
"true"
dojoType=
"dijit.form.TextBox"
value=
""
name=
"password"
id=
"password"
/></td>
</tr>
<tr>
<td colspan=
"2"
align=
"center"
>
<table width=
"100%"
border=
"0"
cellspacing=
"0"
cellpadding=
"0"
>
<tr>
<td align=
"center"
valign=
"top"
width=
"40%"
>
<!-- button ok -->
<button dojoType=
"dijit.form.Button"
type=
"submit"
id=
"LoginButton"
onClick=
"return validate();"
>User Login</button></td>
<td align=
"left"
valign=
"top"
width=
"40%"
>
<!-- button cancel -->
<button dojoType=
"dijit.form.Button"
type=
"submit"
onclick=
"document.Login.reset()"
id=
"Cancel"
>Cancel</button></td>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width=
"180"
border=
"0"
cellspacing=
"0"
cellpadding=
"0"
>
<tr>
<td>
<div dojoType=
"dijit.form.DropDownButton"
>
<span>Change Password</span>
<div dojoType=
"dijit.TooltipDialog"
id=
"dialog12"
title=
"First Dialog"
execute=
"checkPw(arguments[0]);"
>
<table>
<tr>
<td><label
for
=
"name"
>Old Password: </label></td>
<td><input dojoType=
"dijit.form.TextBox"
type=
"password"
name=
"oldpw"
id=
"oldpw"
></td>
</tr>
<tr>
<td><label
for
=
"loc"
>New Password: </label></td>
<td><input dojoType=
"dijit.form.TextBox"
type=
"password"
name=
"newpw"
id=
"newpw"
></td>
</tr>
<tr>
<td><label
for
=
"desc"
>Confirm New Password: </label></td>
<td><input dojoType=
"dijit.form.TextBox"
type=
"password"
name=
"confirmpw"
id=
"confirmpw"
></td>
</tr>
<tr>
<td colspan=
"2"
align=
"center"
>
<button dojoType=dijit.form.Button type=
"submit"
onclick=
"changePassword();"
>Submit</button></td>
</tr>
</table>
</div>
</div>
</td>
<td> </td>
<td>
<div dojoType=
"dijit.form.DropDownButton"
>
<span>Forgot Password</span>
<div dojoType=
"dijit.TooltipDialog"
id=
"dialog11"
title=
"First Dialog"
execute=
"checkPw(arguments[0]);"
>
<table>
<tr>
<td><label>Enter UserId: </label></td>
<td><input dojoType=
"dijit.form.TextBox"
type=
"text"
name=
"userId"
></td>
</tr>
<tr><td>Or</td></tr>
<tr>
<td><label>Enter Email Address: </label></td>
<td><input dojoType=
"dijit.form.TextBox"
type=
"text"
name=
"email"
></td>
</tr>
<tr>
<td colspan=
"2"
align=
"center"
>
<button dojoType=dijit.form.Button type=
"submit"
>
Submit</button></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
<script>
function validate
(){
userId = document.getElementById
(
'us
erId
').
value
password = document.getElementById
(
'pa
ssword
').
value
errMsg=
" "
;
if
(
userId ==
""
){
errMsg +=
"Please enter User
Name/n"
;
}
if
(
password ==
""
){
errMsg +=
"Please enter Password"
;
}
if
(
errMsg!=
" "
){
alert
(
errMsg
)
;
return false
;
}
document.forms
[
'lo
ginForm
'].
submit
()
;
}
</script>
<script>
function validate1
(){
userName = document.getElementById
(
'us
erName
').
value
email = document.getElementById
(
'em
ail
').
value
errMsg=
" "
;
if
(
userName ==
""
&& email ==
""
){
errMsg +=
"Please enter userName Or email address/n"
;
}
var reg = /^
([
A-Za-z0-
9
_/-/.
])
+/
@
([
A-Za-z0-
9
_/-/.
])
+/.
([
A-Za-z
]{
2
,
4
})
$/;
if
(
!
(
email ==
""
)){
if
(
reg.test
(
email
)
==
false
) {
errMsg+=
'In
valid Email Address
';
}
}
if
(
errMsg!=
" "
){
alert
(
errMsg
)
;
return false
;
}
document.forms
[
're
setPasswordForm
'].
submit
()
;
}
</script>
<script>
function changePassword
(){
newpw=document.getElementById
(
'ne
wpw
').
value
confirmpw=document.getElementById
(
'co
nfirmpw
').
value
if
(
newpw!=confirmpw
){
alert
(
'Pl
ease enter correct confirm password.
');
}
else
{
alert
(
'Yo
u can
do
any type of action
');
}
}
</script>
</body>
</html>TimeSpinner
.
This is same as the dojo NumberSpinner
. But the NumberSpinner only worked
on the an integer type data. That means you increase and decrease an integer
number. Similarly the TimeSpinner button provides you to increase and decrease
the time through the TimeSpinner button in AM and PM. If you enter before 12:00
then it displays the time in AM and after 12:00 it displays the time in PM.
<html> <head> <title> Dojo TimeSpinner Example</title> <style type= "text/css" > @import "../dijit/themes/soria/soria.css" ; @import "/resources/dojo.css" ; </style> <script type= "text/javascript" src= "dojo.js" djConfig= "parseOnLoad: true" ></script> <script type= "text/javascript" > dojo.require ( "dojox.widget.TimeSpinner" ) ; dojo.require ( "dojo.parser" ) ; // scan page for widgets </script> </head> <body class = "soria" > <h1>Dojo TimeSpinner Example Demo</h1> <br> <input id= "timeSpinner" dojoType= "dojox.widget.TimeSpinner" value= "12:30 PM" name= "timeSpinner" hours= "12" id= "timeSpinner" /> </body> </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Dojo widgets introduction and sample code (1)
- Dojo widgets introduction and sample code (2)
- Dojo widgets introduction and sample code (3)
- Inter-Process Communication (IPC) Introduction and Sample Code
- Apple Swift3.0 Guides and Sample Code
- Domain Object Layer Design and Sample Code for LiteMDA
- Java ThreadLocal - How to use and code sample
- The blog about Sample Browser_Serach,download,learn,share, and request code samples
- Domain Object Layer Design and Sample Code for LiteMDA
- Analysing the ASM code of a simple sample of C programming language at Linux Platform by GCC and GDB
- Corporation of cuda and openGL Texture( Source Code sample)
- Developers’ Must-have: the new Microsoft All-In-One Code Framework Sample Browser and 3500+ samples
- Sample: Mixing Unmanaged C++, C++/CLI, and C# code
- 著名的安装制作软件InnoSetup的源码及示例源码-The installation of a well-known software s source code and sample InnoSetup source
- oracle dbca silent mode create CDB and PDB sample code
- Java ThreadLocal - How to use and code sample
- sample code about overloading new and delete
- Developers’ Must-have: the new Microsoft All-In-One Code Framework Sample Browser and 3500+ samples
- Java ThreadLocal - How to use and code sample
- How to Convert Temperature (K) to RGB: Algorithm and Sample Code