Dialog Widget

DIALOG WIDGET

INTRODUCTION

The Dialog Widget allows you to build "draggable", highly customizable, floating dialog boxes made up of pure JavaScript1.2 D-HTML components (no native Form buttons or other native components are used, unless you specify it). Try it on every platform such as UNIX, Windows, Mac, and experience the cross-platform interface; you should get exactly the same results, unlike native based dialog components such as the popular JavaScript alert dialog box that doesn't let you specify a title, font, images or button label, etc. Using the Dialog API, the Dialog Widget lets you customize it all!

The following links open some sample dialogs constructed from the Dialog Widget API:

HOW IT WORKS

Look at the first sample, the "Image-based Dialog". This code uses the imageDialog function that's included in the SCRIPT tag of this page source. This should be the easiest dialog sample to construct, as it consists of only three (3) lines of code inside the function.


function imageDialog(img) {
	var dialog = new Dialog();
	dialog.setDialogContent('<IMG SRC="about:logo">');
	dialog.openDialog('imgDialog');
}

This imageDialog function uses the referred Dialog API. The first line inside the function invokes an instance of the Dialog object by using the JavaScript new keyword. The second line sets the "content" of the dialog, in this case, an IMG tag. The third line opens the dialog.

There's a lot more you can do to customize your own dialog, as you can see from the other sample dialog boxes. For example, take a look at the "In-line Dialog" sample. This link calls the inlineDialog function that's included in the SCRIPT tag of this page.


function inlineDialog(title, str, button) {
	var dialog = new Dialog();
	dialog.setDialogContent(str);
	dialog.setDialogTitle(title);
	dialog.addDialogButton("mylabel", button, "center", 3);
	dialog.openDialog(title);
}

The inlineDialog function is similar to the imageDialog function, except it let's you customize a little more. And, here you can specify the dialog settings in-line via the function parameters when you call the function, including setting the dialog content, and the dialog title via the setDialogTitle(param) method, as well as the ability to add a dialog button via the addDialogButton(param) method, which are part of the Dialog API.

To learn more about the Dialog API, view the source of this page and check out the other sample dialogs, such as the customDialog which includes additional API methods for adding more buttons, functions, colors, size and positioning to the dialog; or look at the exampleDialog method in dialog.js, the source of the Dialog Widget.

MORE EXAMPLES

The Dialog Widget is free to the public, and you can submit your URL for possible posting here, if you use the Dialog Widget on your page, such as the following sites have done:

Dialog Widget Midi Player using Crescendo by SOFTVision Concepts.
Navigational Menu by Myriad Voices.
Links to New Additions to the Library by Fright Library, Toronto.
Index floating dialog by Advanced Computer Interface Designs Limited.

The following image is part of a screen-shot of the Dialog Widget being used inside Visual DHTML:

KNOWN ISSUES

The Dialog Widget is dynamically written/built, "on-the-fly", via JavaScript; therefore, on slower systems it may take longer for the Dialogs to display. Also, note that the Dialog Widget is free sample code; provided "AS IS". If you see missing features, please let us know.

This beta version of the Dialog Widget requires JavaScript1.2.

DOWNLOAD

	Source: dialog.js

Download the free dialog.js library, and then add the following SCRIPT tag to your page:

	<SCRIPT LANGUAGE="JavaScript1.2" SRC="dialog.js">

Check out the Dialog JSB, too, in the Netscape Component Developer's Kit (CDK) 1.0.

RESOURCES AND SUPPORT

See also Visual DHTML, which includes several live examples of the Dialog Widget.

For more information on DHTML, check out our Dynamic HTML resources page.

If you need technical support or other assistance, please visit the support area. Email your comments and suggestions about the Dialog Widget to dhtml-feedback@netscape.com.