Dojo Button and Alert Dialog
/skill level/
/viewed/
Want to get started with the Dojo JavaScript Toolkit? Here's the place to start. This code uses Dojo to skin and create specialized Document Object Model (DOM) elements.
The template was written for and used as the blank slate for our Get Started With Dojo tutorial.
This code is in a wiki. If you want to help others get started with Dojo and know of some good templating tips, add the advice or code changes directly to this wiki page.
What it Does
The code uses Dojo to add a new theme to the dialog box and button. If you look at the code, you'll see Dojo makes it easy to do this with the minimum amount of JavaScript legwork possible.
Here's an example of the code in action:
The Code
Download the file by right-clicking this link and selecting Save Link As���
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
function dialogAlert(txtTitle, txtContent)
{
var thisdialog = new dijit.Dialog({ title: txtTitle, content: txtContent });
dojo.body().appendChild(thisdialog.domNode);
thisdialog.startup();
thisdialog.show();
}
</script>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.2.0/dijit/themes/tundra/tundra.css";
</style>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" id="buttonTest">
Clicky
<script type="dojo/method" event="onClick">
dialogAlert('Clicky-click!', 'Woohoo! You clicked and now you see this box.');
</script>
</button>
</body>
</html>
- This page was last modified 21:41, 20 October 2008.