YUI Library Examples: Container Family: SimpleDialog Quickstart Example

Setting up the SimpleDialog

The SimpleDialog Control is an extension of Dialog that reproduces the behavior of a simple dialog box (but without using an actual browser popup window); its primary use is to elicit binary decisions from the user (yes/no, okay/cancel, etc.). SimpleDialog makes it easy to implement this kind of interaction. In this tutorial, we will create a SimpleDialog with "Yes"/"No" choices, and display an alert if the user clicks "Yes".

SimpleDialog defines two new properties:

icon: defines which of six standard icons will be displayed in the SimpleDialog;
text: used to specify a small amount of text to display in the SimpleDialog.

The "buttons" property is inherited from Dialog, and uses the same familiar array-of-object literals syntax as demonstrated in the following constructor:


1	// Instantiate the Dialog
2	YAHOO.example.container.simpledialog1 =
3	new YAHOO.widget.SimpleDialog("simpledialog1",
4	{ width: "300px",
5	fixedcenter: true,
6	visible: false,
7	draggable: false,
8	close: true,
9	text: "Do you want to continue?",
10	icon: YAHOO.widget.SimpleDialog.ICON_HELP,
11	constraintoviewport: true,
12	buttons: [ { text:"Yes", handler:handleYes, isDefault:true },
13	{ text:"No", handler:handleNo } ]
14	} );
	view plain \| print \| ?

Next, we'll define the handlers for our buttons. Clicking "Yes" will cause an alert to be displayed, whereas the "No" button will simply dismiss the SimpleDialog:


1	// Define various event handlers for Dialog
2	var handleYes = function() {
3	alert("You clicked yes!");
4	this.hide();
5	};
6
7	var handleNo = function() {
8	this.hide();
9	};
	view plain \| print \| ?

YUI Library Examples: Container Family: SimpleDialog Quickstart Example

Setting up the SimpleDialog

YUI Logger Output:

Container Family Examples:

More Container Family Resources: