oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgraded yui to 2.2.2 and yui-ext to 1.0.1a

Browse source
This commit is contained in:
JT Smith 2007-07-05 04:23:55 +00:00
parent 4d9af2c691
commit 547ced6500
1992 changed files with 645731 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

106
www/extras/yui/examples/container/simpledialog/1.html Normal file
View file

@ -0,0 +1,106 @@
<!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=UTF-8">
<title>YUI Container - SimpleDialog Quickstart (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../../examples/assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t5">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Container: SimpleDialog Quickstart</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
<li class="item"><a href="../skin/1.html">Panel: Skinning</a></li>
<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
<li class="item selected"><a href="1.html">SimpleDialog Quickstart</a></li>
<li class="child active"><a href="1.html">Setting up the SimpleDialog</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the SimpleDialog</h1>
<p>The SimpleDialog component 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".</p>
<p>SimpleDialog defines two new properties:</p>
<ol>
<li> <strong>icon</strong>: defines which of six standard icons will be displayed in the SimpleDialog;</li>
<li><strong>text</strong>: used to specify a small amount of text to display in the SimpleDialog.</li>
</ol>
<p> The "buttons" property is inherited from Dialog, and uses the same familiar array-of-object literals syntax as demonstrated in the following constructor:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// 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 } ]
} );
</textarea>
<p>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:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Define various event handlers for Dialog
var handleYes = function() {
alert("You clicked yes!");
this.hide();
};
var handleNo = function() {
this.hide();
};
</textarea>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>