Mega Code Archive

 
Categories / JavaScript DHTML / Ajax Layer
 

Yes no Dialog

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>YAHOO.widget.SimpleDialog</title> <script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/dom/dom.js" ></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" /> <link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" /> <link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" /> <script type="text/javascript" src="./build/container/container.js"></script> <script language="javascript">   YAHOO.namespace("example.simpledialog");   function init() {     var handleCancel = function(e) {       alert("You clicked 'Cancel'!");       this.hide();     }     var handleOK = function(e) {       alert("You clicked 'OK'!");       this.hide();     }     YAHOO.example.simpledialog.dlg = new YAHOO.widget.SimpleDialog("dlg", { visible:false, width: "20em", effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25},{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}], fixedcenter:true, modal:true, draggable:false });          YAHOO.example.simpledialog.dlg.setHeader("Warning!");     YAHOO.example.simpledialog.dlg.setBody("Are you sure you want to do this?");     YAHOO.example.simpledialog.dlg.cfg.queueProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);     YAHOO.example.simpledialog.dlg.cfg.queueProperty("buttons", [                                      { text:"OK", handler:handleOK, isDefault:true },                                     { text:"Cancel", handler:handleCancel }                                   ]);     var listeners = new YAHOO.util.KeyListener(document, { keys : 27 }, {fn:handleCancel ,scope:YAHOO.example.simpledialog.dlg, correctScope:true} );     YAHOO.example.simpledialog.dlg.cfg.queueProperty("keylisteners", listeners);     YAHOO.example.simpledialog.dlg.render(document.body);   }   YAHOO.util.Event.addListener(window, "load", init); </script> </head> <body>   <div class="box">     <div class="hd">       <h1>SimpleDialog Example</h1>     </div>     <div class="bd">       <p>SimpleDialog is an implementation of <a href="panel.html">Panel</a> that behaves like an OS dialog. SimpleDialog is used for asking the user a simple question that usually involves a Yes/No or OK/Cancel response.</p>        <p>The code to instantiate this SimpleDialog example looks like this:         <code>dlg = new YAHOO.widget.SimpleDialog("dlg", { width: "20em", effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, fixedcenter:true, modal:true, draggable:false });<br/><br/>     YAHOO.example.simpledialog.dlg.setHeader("Warning!");<br/>     YAHOO.example.simpledialog.dlg.setBody("Are you sure you want to do this?");<br/>     YAHOO.example.simpledialog.dlg.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);         </code>         Next, we wire up the buttons using a simple JSON structure that points to local handlers for each button:         <code>                 dlg.cfg.setProperty("buttons",  [              { text:"OK", handler:handleOK, isDefault:true },             { text:"Cancel",handler:handleCancel }              ]         );         </code>       </p>       <button onclick="YAHOO.example.simpledialog.dlg.show()">Show me a dialog</button>       <select>         <option>This is a &lt;select&gt; element, helpul for testing the IFRAME shim</option>       </select>     </div>   </div> </body> </html>                     yui.zip( 3,714 k)