File Under: JavaScript

Dojo Button and Alert Dialog

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.

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>