Yes no Dialog : Window Dialog : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Window Dialog »

 

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>


           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Window Dialog