A simple dojo confirm box
We will create a simple dojo confirm box. Confirm box will have "Yes" and "No" buttons. We can define actions for Yes/No buttons and also we can add custom message and title for confirm box.
Have a look to following html and js file to get a dojo confirm box.
HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dojo Confirm Box Example</title>
<link rel="stylesheet" href="../js/1_8_3/dijit/themes/claro/claro.css">
<style type="text/css">
@import "../js/1_8_3/dojo/resources/dojo.css";
@import "../js/1_8_3/dijit/themes/claro/claro.css";
@import "../js/1_8_3/dijit/themes/claro/document.css";
@import "../js/1_8_3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "../js/1_8_3/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../js/1_8_3/dojo/dojo.js'></script>
<script src='../js/confirm.js'></script>
</head>
<body class="claro">
<div style="width:450px;height:200px;margin-left:200px;">
<br>
<a href='#' onClick="openConfirmBox();">Open Confirm Box</a>
</div>
</body>
</html>
Js file - confirm.js
/**
* confirmation dialog box.
*/
function openConfirmBox() {
require(["dojo/ready", "dojox/widget/DialogSimple",
"dijit/form/Button"
],
function(ready,
Dialog,Button ){
ready(function(){
var confirmBox = new dojox.widget.DialogSimple({
title: "Confirm Box",
style: "width: 275px;height:auto; font-weight:bold",
content: "<div>Click Yes to confirm.<br/>"
});
var div = dojo.create('div', {
id:"btn"
}, confirmBox.containerNode);
var noBtn = new dijit.form.Button({
label: "NO",
onClick: function() {
//action for no button
confirmBox.hide();
dojo.destroy(confirmBox);
}
});
var yesBtn = new dijit.form.Button({
label: "YES",
onClick: function() {
//call action for Yes
confirmBox.hide();
dojo.destroy(confirmBox);
}
});
dojo.create(yesBtn.domNode, {}, div);
dojo.create(noBtn.domNode, {}, div);
confirmBox.show();
});
});
}
Confirm Box :
We will create a simple dojo confirm box. Confirm box will have "Yes" and "No" buttons. We can define actions for Yes/No buttons and also we can add custom message and title for confirm box.
Have a look to following html and js file to get a dojo confirm box.
HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dojo Confirm Box Example</title>
<link rel="stylesheet" href="../js/1_8_3/dijit/themes/claro/claro.css">
<style type="text/css">
@import "../js/1_8_3/dojo/resources/dojo.css";
@import "../js/1_8_3/dijit/themes/claro/claro.css";
@import "../js/1_8_3/dijit/themes/claro/document.css";
@import "../js/1_8_3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "../js/1_8_3/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../js/1_8_3/dojo/dojo.js'></script>
<script src='../js/confirm.js'></script>
</head>
<body class="claro">
<div style="width:450px;height:200px;margin-left:200px;">
<br>
<a href='#' onClick="openConfirmBox();">Open Confirm Box</a>
</div>
</body>
</html>
Js file - confirm.js
/**
* confirmation dialog box.
*/
function openConfirmBox() {
require(["dojo/ready", "dojox/widget/DialogSimple",
"dijit/form/Button"
],
function(ready,
Dialog,Button ){
ready(function(){
var confirmBox = new dojox.widget.DialogSimple({
title: "Confirm Box",
style: "width: 275px;height:auto; font-weight:bold",
content: "<div>Click Yes to confirm.<br/>"
});
var div = dojo.create('div', {
id:"btn"
}, confirmBox.containerNode);
var noBtn = new dijit.form.Button({
label: "NO",
onClick: function() {
//action for no button
confirmBox.hide();
dojo.destroy(confirmBox);
}
});
var yesBtn = new dijit.form.Button({
label: "YES",
onClick: function() {
//call action for Yes
confirmBox.hide();
dojo.destroy(confirmBox);
}
});
dojo.create(yesBtn.domNode, {}, div);
dojo.create(noBtn.domNode, {}, div);
confirmBox.show();
});
});
}
Confirm Box :

No comments:
Post a Comment