YUI Library Examples: Container Family: SimpleDialog Quickstart Example

Container Family: SimpleDialog Quickstart Example

Use the SimpleDialog Control when you want to solicit very simple (usually binary) information from your users — ok/cancel, yes/no are the classic examples of this sort of interaction. Use the button below to show a SimpleDialog instance; if you click "yes", that choice will be echoed back to you by script.

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:

  1. icon: defines which of six standard icons will be displayed in the SimpleDialog;
  2. 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:

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:

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More Container Family Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings