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.
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:
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 | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings