webgui/www/extras/yui/examples/container/panelwait/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

78 lines
No EOL
3 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/animation/animation.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 }
#content { font-face:serif; text-align:justify; background:#fff; border:1px solid #ccc; width:400px; margin:50px auto; padding:5px; }
</style>
<script>
YAHOO.namespace("example.container");
function init() {
// Initialize the temporary Panel to display while waiting for external content to load
YAHOO.example.container.wait =
new YAHOO.widget.Panel("wait",
{ width:"240px",
fixedcenter:true,
close:false,
draggable:false,
modal:true,
visible:false,
effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5}
}
);
YAHOO.example.container.wait.setHeader("Loading, please wait...");
YAHOO.example.container.wait.setBody("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
YAHOO.example.container.wait.render(document.body);
// Define the callback object for Connection Manager that will set the body of our content area when the content has loaded
var content = document.getElementById("content");
var callback = {
success : function(o) {
content.innerHTML = o.responseText;
content.style.visibility = "visible";
YAHOO.example.container.wait.hide();
},
failure : function(o) {
content.innerHTML = o.responseText;
content.style.visibility = "visible";
content.innerHTML = "CONNECTION FAILED!";
YAHOO.example.container.wait.hide();
}
}
// Show the Panel
YAHOO.example.container.wait.show();
// Connect to our data source and load the data
var conn = YAHOO.util.Connect.asyncRequest("GET", "../assets/somedata.php?r=" + new Date().getTime(), callback);
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="content" style="visibility:hidden"></div>
</body>
</html>