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!