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:
- 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 Logger Output:
Logger Console
INFO1930ms (+0) 12:51:13 PM:Config
Firing Config event: iframe=false
INFO1930ms (+0) 12:51:13 PM:Config
setProperty: xy=39,350
INFO1930ms (+0) 12:51:13 PM:Config
setProperty: y=350
INFO1930ms (+3) 12:51:13 PM:Config
setProperty: x=39
INFO1927ms (+0) 12:51:13 PM:Config
setProperty: zindex=0
INFO1927ms (+0) 12:51:13 PM:Config
Firing Config event: zindex=null
INFO1927ms (+0) 12:51:13 PM:Config
Firing Config event: iframe=false
INFO1927ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, text=Do you want to continue?, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, icon=hlpicon, underlay=shadow, visible=false, x=39, y=350, iframe=false, zindex=null,
INFO1927ms (+0) 12:51:13 PM:Config
queueProperty: iframe=undefined
INFO1927ms (+0) 12:51:13 PM:Config
setProperty: xy=39,350
INFO1927ms (+0) 12:51:13 PM:Config
setProperty: xy=39,350
INFO1927ms (+0) 12:51:13 PM:Config
setProperty: y=350
INFO1927ms (+0) 12:51:13 PM:Config
setProperty: x=39
INFO1927ms (+0) 12:51:13 PM:Config
setProperty: y=350
INFO1927ms (+0) 12:51:13 PM:Config
setProperty: x=39
INFO1927ms (+0) 12:51:13 PM:Config
Firing Config event: y=350
INFO1927ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, text=Do you want to continue?, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, icon=hlpicon, underlay=shadow, visible=false, x=39, y=350, iframe=false, zindex=null,
INFO1927ms (+0) 12:51:13 PM:Config
queueProperty: iframe=undefined
INFO1927ms (+1) 12:51:13 PM:Config
setProperty: xy=39,350
INFO1926ms (+0) 12:51:13 PM:Config
setProperty: xy=39,350
INFO1926ms (+0) 12:51:13 PM:Config
setProperty: y=350
INFO1926ms (+0) 12:51:13 PM:Config
setProperty: x=39
INFO1926ms (+0) 12:51:13 PM:Config
setProperty: y=350
INFO1926ms (+1) 12:51:13 PM:Config
setProperty: x=39
INFO1925ms (+0) 12:51:13 PM:Config
Firing Config event: x=39
INFO1925ms (+0) 12:51:13 PM:Config
Firing Config event: visible=false
INFO1925ms (+0) 12:51:13 PM:Config
Firing Config event: underlay=shadow
INFO1925ms (+0) 12:51:13 PM:Config
Firing Config event: icon=hlpicon
INFO1925ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, text=Do you want to continue?, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, icon=hlpicon, underlay=shadow, visible=false, x=39, y=350, iframe=false, zindex=null,
INFO1925ms (+0) 12:51:13 PM:Config
queueProperty: iframe=undefined
IFRA1925ms (+0) 12:51:13 PM:global
xy: 39,350
INFO1925ms (+0) 12:51:13 PM:Config
setProperty: xy=39,350
INFO1925ms (+0) 12:51:13 PM:Config
setProperty: y=350
INFO1925ms (+1) 12:51:13 PM:Config
setProperty: x=39
INFO1924ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, text=Do you want to continue?, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, icon=hlpicon, zindex=null, underlay=shadow, visible=false, x=39, y=350, iframe=false,
INFO1924ms (+0) 12:51:13 PM:Config
queueProperty: y=350
INFO1924ms (+0) 12:51:13 PM:Config
setProperty: y=350
INFO1924ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, text=Do you want to continue?, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, icon=hlpicon, zindex=null, underlay=shadow, visible=false, x=39, iframe=false,
INFO1924ms (+0) 12:51:13 PM:Config
queueProperty: x=39
INFO1924ms (+0) 12:51:13 PM:Config
setProperty: x=39
INFO1924ms (+0) 12:51:13 PM:Config
Firing Config event: xy=39,350
INFO1924ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, text=Do you want to continue?, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, icon=hlpicon, iframe=false, zindex=null, underlay=shadow, visible=false,
INFO1924ms (+0) 12:51:13 PM:Config
queueProperty: underlay=undefined
INFO1924ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, underlay=shadow, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, visible=false, text=Do you want to continue?, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, icon=hlpicon, iframe=false, zindex=null,
INFO1924ms (+2) 12:51:13 PM:Config
queueProperty: iframe=undefined
INFO1922ms (+0) 12:51:13 PM:Config
Firing Config event: buttons=[object Object],[object Object]
INFO1922ms (+0) 12:51:13 PM:Config
Firing Config event: constraintoviewport=true
INFO1922ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, underlay=shadow, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, visible=false, text=Do you want to continue?, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, iframe=false, zindex=null, icon=hlpicon,
INFO1922ms (+1) 12:51:13 PM:Config
queueProperty: icon=undefined
INFO1921ms (+0) 12:51:13 PM:Config
Firing Config event: text=Do you want to continue?
INFO1921ms (+0) 12:51:13 PM:Config
Firing Config event: visible=false
INFO1921ms (+0) 12:51:13 PM:Config
Firing Config event: close=true
INFO1921ms (+0) 12:51:13 PM:Config
Firing Config event: draggable=false
INFO1921ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, underlay=shadow, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, visible=false, text=Do you want to continue?, icon=hlpicon, constraintoviewport=true, buttons=[object Object],[object Object], xy=39,350, iframe=false, zindex=null,
INFO1921ms (+0) 12:51:13 PM:Config
queueProperty: iframe=undefined
INFO1921ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, underlay=shadow, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, visible=false, text=Do you want to continue?, icon=hlpicon, constraintoviewport=true, buttons=[object Object],[object Object], zindex=null, xy=39,350, iframe=false,
INFO1921ms (+0) 12:51:13 PM:Config
queueProperty: xy=39,350
INFO1921ms (+1) 12:51:13 PM:Config
setProperty: xy=39,350
INFO1920ms (+0) 12:51:13 PM:Config
Firing Config event: fixedcenter=true
INFO1920ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, underlay=shadow, modal=false, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, visible=false, text=Do you want to continue?, icon=hlpicon, constraintoviewport=true, buttons=[object Object],[object Object], iframe=false, zindex=null,
INFO1920ms (+0) 12:51:13 PM:Config
queueProperty: iframe=undefined
INFO1920ms (+0) 12:51:13 PM:Config
Firing Config event: width=300px
INFO1920ms (+0) 12:51:13 PM:Config
Firing Config event: postmethod=manual
INFO1920ms (+0) 12:51:13 PM:Config
Firing Config event: hideaftersubmit=true
INFO1920ms (+0) 12:51:13 PM:Config
setProperty: zindex=0
INFO1920ms (+0) 12:51:13 PM:Config
Firing Config event: zindex=null
INFO1920ms (+1) 12:51:13 PM:Config
Firing Config event: modal=false
INFO1919ms (+0) 12:51:13 PM:Config
Firing Config event: underlay=shadow
INFO1919ms (+0) 12:51:13 PM:Config
Firing Config event: dragonly=false
INFO1919ms (+6) 12:51:13 PM:Config
Firing Config event: appendtodocumentbody=false
INFO1913ms (+1) 12:51:13 PM:Config
Firing Config event: monitorresize=true
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, underlay=shadow, modal=false, zindex=null, hideaftersubmit=true, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, visible=false, text=Do you want to continue?, icon=hlpicon, constraintoviewport=true, iframe=false, buttons=[object Object],[object Object],
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: buttons=[object Object],[object Object]
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, dragonly=false, underlay=shadow, modal=false, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual, width=300px, fixedcenter=true, draggable=false, close=true, visible=false, text=Do you want to continue?, icon=hlpicon, constraintoviewport=true, iframe=false,
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: constraintoviewport=true
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, constraintoviewport=false, dragonly=false, underlay=shadow, modal=false, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual, width=300px, fixedcenter=true, iframe=false, draggable=false, close=true, visible=false, text=Do you want to continue?, icon=hlpicon,
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: icon=hlpicon
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, constraintoviewport=false, dragonly=false, underlay=shadow, modal=false, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual, width=300px, fixedcenter=true, iframe=false, draggable=false, close=true, visible=false, text=Do you want to continue?,
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: text=Do you want to continue?
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, constraintoviewport=false, dragonly=false, underlay=shadow, modal=false, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual, width=300px, fixedcenter=true, iframe=false, draggable=false, close=true, visible=false,
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: close=true
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, constraintoviewport=false, close=true, dragonly=false, underlay=shadow, modal=false, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual, width=300px, fixedcenter=true, iframe=false, draggable=false, visible=false,
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: draggable=false
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, constraintoviewport=false, close=true, dragonly=false, draggable=false, underlay=shadow, modal=false, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual, width=300px, fixedcenter=true, iframe=false, visible=false,
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: visible=false
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, constraintoviewport=false, close=true, dragonly=false, draggable=false, underlay=shadow, modal=false, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual, width=300px, fixedcenter=true, iframe=false, visible=true,
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: fixedcenter=true
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, constraintoviewport=false, close=true, dragonly=false, draggable=false, underlay=shadow, modal=false, visible=true, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual, width=300px, fixedcenter=false, iframe=false,
INFO1912ms (+0) 12:51:13 PM:Config
queueProperty: width=300px
INFO1912ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, constraintoviewport=false, iframe=false, close=true, dragonly=false, draggable=false, underlay=shadow, modal=false, visible=true, zindex=null, hideaftersubmit=true, buttons=none, postmethod=manual,
INFO1912ms (+1) 12:51:13 PM:Config
queueProperty: postmethod=manual
INFO1911ms (+0) 12:51:13 PM:Config
Firing Config event: visible=false
INFO1911ms (+0) 12:51:13 PM:Config
setProperty: visible=false
INFO1911ms (+0) 12:51:13 PM:Config
setProperty: text=
INFO1911ms (+0) 12:51:13 PM:Config
Added property: text
INFO1911ms (+0) 12:51:13 PM:Config
setProperty: icon=none
INFO1911ms (+0) 12:51:13 PM:Config
Added property: icon
INFO1911ms (+0) 12:51:13 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, constraintoviewport=false, iframe=false, close=true, dragonly=false, draggable=false, underlay=shadow, modal=false, visible=true, zindex=null, postmethod=async, hideaftersubmit=true, buttons=none,
INFO1911ms (+0) 12:51:13 PM:Config
queueProperty: buttons=none
INFO1911ms (+1911) 12:51:13 PM:Config
setProperty: buttons=none
INFO0ms (+0) 12:51:11 PM:global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
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)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on Sourceforge (external)
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Charts (experimental)
- Color Picker
- Cookie (beta)
- Connection Manager
- Container
- DataTable (beta)
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper (beta)
- ImageLoader
- JSON
- Layout Manager (beta)
- Logger
- Menu
- Profiler (beta)
- ProfilerViewer (beta)
- Resize (beta)
- Rich Text Editor (beta)
- Selector (beta)
- Slider
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader (beta)
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings