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

171
www/extras/yui/examples/container/dialog/1.html Normal file
View file

@ -0,0 +1,171 @@
<!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 - Dialog 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: Dialog 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 selected"><a href="1.html">Dialog Quickstart</a></li>
<li class="child active"><a href="1.html">Setting up the Dialog</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</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 Dialog</h1>
<p>The Dialog component is an extension of Panel that is meant to emulate the behavior of an dialog window using a floating, draggable HTML element. Dialog provides an interface for easily gathering information from the user without leaving the underlying page context. The information gathered is collected via a standard HTML form; Dialog supports the submission of form data through XMLHttpRequest, through a normal form submission, or through a manual script-based response (where the script reads and responds to the form values and the form is never actually submitted to the server).</p>
<p>Instantiating a Dialog is very similar to other controls in the Container collection. In this tutorial, we will create a Dialog from existing markup where the container element's id is "dialog1":</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate the Dialog
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
{ width : "300px",
fixedcenter : true,
visible : false,
constraintoviewport : true,
buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
{ text:"Cancel", handler:handleCancel } ]
} );
</textarea>
<p>The properties for <em>width</em>, <em>fixedcenter</em>, <em>visible</em>, and <em>constraintoviewport</em> are inherited from Panel. Unique to the Dialog control is the <em>buttons</em> property, which takes an array of object literals representing the buttons that will be rendered in the Dialog's footer. Each one of these button literals has three possible properties: "text" which represents the button text, "handler" which is a reference to the function that will execute when the button is clicked, and "isDefault" which will apply a bold style to the button when set to true.</p>
<p>Next, we must define the <em>handleCancel</em> and <em>handleSubmit</em> handlers for our buttons. In this tutorial, the submit and cancel buttons will call the corresponding functions in the Dialog:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Define various event handlers for Dialog
var handleSubmit = function() {
this.submit();
};
var handleCancel = function() {
this.cancel();
};
</textarea>
<p>By default, the Dialog is submitted using the <a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a>. In order to handle the response from the server, we must define callback functions that will execute when the submission has occurred. First, we will define the functions, and then we will set them into our Dialog's <em>callback</em> &mdash; the same callback object that will be passed to Connection Manager's <em>asyncRequest</em> method:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var handleSuccess = function(o) {
var response = o.responseText;
response = response.split("<!")[0];
document.getElementById("resp").innerHTML = response;
eval(response);
};
var handleFailure = function(o) {
alert("Submission failed: " + o.status);
};
YAHOO.example.container.dialog1.callback = { success: handleSuccess,
failure: handleFailure };
</textarea>
<p>You can also take advantage of Dialog's built-in validation function so that you can verify that the values entered by the user are valid prior to form submission. In this tutorial, we will verify that the user has entered, at the very least, a first and last name. Using the <em>getData</em> function, we can easily query the values of the form fields. In a valid scenario, the function should return true, otherwise the function should return false, which will prevent the submission:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Validate the entries in the form to require that both first and last name are entered
YAHOO.example.container.dialog1.validate = function() {
var data = this.getData();
if (data.firstname == "" || data.lastname == "") {
alert("Please enter your first and last names.");
return false;
} else {
return true;
}
};
</textarea>
<p>Finally, we will build the markup for the Dialog. A Dialog contains a form whose fields will be submitted to the server. Note that the URL where the form will be submitted is specified in the "action" attribute of the form.</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="dialog1">
<div class="hd">Please enter your information</div>
<div class="bd">
<form method="POST" action="http://developer.yahoo.com/yui/examples/container/assets/post.php">
<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
<label for="email">E-mail:</label><input type="textbox" name="email" />
<label for="state[]">State:</label>
<select multiple name="state[]">
<option value="California">California</option>
<option value="New Jersey">New Jersey</option>
<option value="New York">New York</option>
</select>
<div class="clear"></div>
<label for="radiobuttons">Radio buttons:</label>
<input type="radio" name="radiobuttons[]" value="1" checked/> 1
<input type="radio" name="radiobuttons[]" value="2" /> 2
<div class="clear"></div>
<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
<label for="textarea">Text area:</label>&lt;textarea name="textarea"&gt;&lt;/textarea&gt;
<div class="clear"></div>
<label for="cbarray">Multi checkbox:</label>
<input type="checkbox" name="cbarray[]" value="1" /> 1
<input type="checkbox" name="cbarray[]" value="2" /> 2
</form>
</div>
</div>
</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>

72
www/extras/yui/examples/container/dialog/2.html Normal file
View file

@ -0,0 +1,72 @@
<!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 - Dialog 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: Dialog 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 selected"><a href="1.html">Dialog Quickstart</a></li>
<li class="child"><a href="1.html">Setting up the Dialog</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</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">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:96%;height:325px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Dialog</em></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>

129
www/extras/yui/examples/container/dialog/solution.html Normal file
View file

@ -0,0 +1,129 @@
<!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">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/connection/connection.js" ></script>
<script type="text/javascript" src="../../../build/container/container.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
<style>
body { background:#eee }
label { display:block;float:left;width:45%;clear:left; }
.clear { clear:both; }
#resp { font-family:courier;margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
</style>
<script>
YAHOO.namespace("example.container");
function init() {
// Define various event handlers for Dialog
var handleSubmit = function() {
this.submit();
};
var handleCancel = function() {
this.cancel();
};
var handleSuccess = function(o) {
var response = o.responseText;
response = response.split("<!")[0];
document.getElementById("resp").innerHTML = response;
eval(response);
};
var handleFailure = function(o) {
alert("Submission failed: " + o.status);
};
// Instantiate the Dialog
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
{ width : "300px",
fixedcenter : true,
visible : false,
constraintoviewport : true,
buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
{ text:"Cancel", handler:handleCancel } ]
} );
// Validate the entries in the form to require that both first and last name are entered
YAHOO.example.container.dialog1.validate = function() {
var data = this.getData();
if (data.firstname == "" || data.lastname == "") {
alert("Please enter your first and last names.");
return false;
} else {
return true;
}
};
// Wire up the success and failure handlers
YAHOO.example.container.dialog1.callback = { success: handleSuccess,
failure: handleFailure };
// Render the Dialog
YAHOO.example.container.dialog1.render();
YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div>
<button id="show">Show dialog1</button>
<button id="hide">Hide dialog1</button>
</div>
<div id="dialog1">
<div class="hd">Please enter your information</div>
<div class="bd">
<form method="POST" action="../assets/post.php">
<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
<label for="email">E-mail:</label><input type="textbox" name="email" />
<label for="state[]">State:</label>
<select multiple name="state[]">
<option value="California">California</option>
<option value="New Jersey">New Jersey</option>
<option value="New York">New York</option>
</select>
<div class="clear"></div>
<label for="radiobuttons">Radio buttons:</label>
<input type="radio" name="radiobuttons[]" value="1" checked/> 1
<input type="radio" name="radiobuttons[]" value="2" /> 2
<div class="clear"></div>
<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
<div class="clear"></div>
<label for="textarea">Text area:</label><textarea name="textarea"></textarea>
<div class="clear"></div>
<label for="cbarray">Multi checkbox:</label>
<input type="checkbox" name="cbarray[]" value="1" /> 1
<input type="checkbox" name="cbarray[]" value="2" /> 2
</form>
</div>
</div>
<div id="resp">Server response will be displayed in this area</div>
</body>
</html>