Dialogs with (popular) JavaScript libraries

The Dojo Toolkit and jQuery UI both offer a dialog “component” (with drag-and-drop). Dojo has two ways of creating such a dialog. There is a declarative and a programmatic way to do so. The declarative approach looks like:

<div dojotype="dijit.Dialog" title="First Dialog">

 Hello New York!
</div>

The div element here is containing a special attribute (dojoType) to tell Dojo, that this is a component of type “dijit.Dialog“. This is straightforward, but… it is reasonable that some don’t like the extra expando (dojoType). The programmatic way is IMO more natural to developers:

var dialog = new dijit.Dialog(
  {id:"dialog1", title: "First Dialog"});

var dialogContent = "Hello New York!";
dialog.setContent(dialogContent);
dialog.show();

Now you are using the JavaScript-API of Dojo to create (and launch) the dialog, when ever you want.In jQuery UI, this is done in a really cool way:

<div id="dialog1" class="flora"
  title="First Dialog">

  Hello New York!
</div>

This little snippet of HTML is not visible (b/c of the used CSS) and when you want to launch the dialog, you just have a very easy JS callback:

launchMyDialog = function()
{
  $("#dialog1").dialog();
}

This is cool. Even more cool is the ready-callback that jQuery “core” is offering you:

$(document).ready(function(){
  $("#dialog1").dialog();
});

When the DOM is ready, the dialog is launched. Pretty neat!

Howdy!

Posted in ajax, javascript, web²

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: