webgui/www/extras/yui/examples/container/dialog/solution.html
JT Smith cfd09a5cb6 upgraded to yui 0.12.0
upgraded to yui-ext 0.33 rc2
2006-11-28 02:23:34 +00:00

129 lines
No EOL
4.7 KiB
HTML

<!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>