Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# 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.

View example in new window.

## 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:

// Instantiate the Dialog YAHOO.example.container.simpledialog1 = new YAHOO.widget.SimpleDialog("simpledialog1", { width: "300px", fixedcenter: true, visible: false, draggable: false, close: true, text: "Do you want to continue?", icon: YAHOO.widget.SimpleDialog.ICON_HELP, constraintoviewport: true, buttons: [ { text:"Yes", handler:handleYes, isDefault:true }, { text:"No", handler:handleNo } ] } );

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:

// Define various event handlers for Dialog var handleYes = function() { alert("You clicked yes!"); this.hide(); }; var handleNo = function() { this.hide(); };

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Container Family Examples:

- The Module Control
- Creating and Positioning an Overlay
- Simple Tooltip Example
- One Tooltip, Many Context Elements
- Simple Panel Example
- Skinning a Panel with Custom CSS: Introduction
- Skinning a Panel with Custom CSS: Advanced
- Creating a Modal "Loading" Panel
- Creating a Resizable Panel
- Dialog Quickstart Example
- SimpleDialog Quickstart Example
- Using ContainerEffect Transitions
- Using the Overlay Manager to Manage Multiple Panels
- Implementing Container Keyboard Shortcuts with KeyListener
- Example of Color Picker Built in a Dialog via JavaScript (included with examples for Color Picker Control)
- Layout inside a resizable Panel (included with examples for Layout Manager (beta))
- Calendar inside a Container (included with examples for Calendar Control)
- Menu Buttons (included with examples for Button Control)
- Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control (beta))
- Split Buttons (included with examples for Button Control)
- Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button (included with examples for Button Control)
- Color Picker Button (included with examples for Button Control)
- Fixed Width Menu Button (included with examples for Button Control)
- OS-Style Programs Menu (included with examples for Menu Family)
- Application Menubar (included with examples for Menu Family)
- Slider Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager (beta))

### More Container Family Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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