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

124
www/extras/yui/examples/container/panelwait/1.html Normal file
View file

@ -0,0 +1,124 @@
<!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 - Panel: Creating a 'Loading' Popup (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: Panel: Creating a 'Loading' Popup</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 selected"><a href="1.html">Panel: Creating a 'Loading' Popup</a></li>
<li class="child active"><a href="1.html">Using Panel as a 'Wait' Indicator</a></li>
<li class="child"><a href="2.html">Functional Example</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"><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">Using Panel as a 'Wait' Indicator</h1>
<p>The Panel can be used to display a temporary message is automatically dismissed when a task has completed. In this tutorial, we will build a Panel that will be displayed while content is being loaded from an external data source, and will be dismissed when the content has finished loading.</p>
<p>We will start by instantiating a Panel and configuring it to display an image and some text in its body:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// 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);
</textarea>
<p>We will also need to place a container for the content that will be dynamically loaded:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="content" style="visibility:hidden"></div>
</textarea>
<p>Finally, we will set up our Connection object and configure its callback to load the content into the container element and close the Panel after the content has finished loading. If the connection is successful, the content will be loaded into the container and the Panel will be hidden. If the connection fails, an error message will be displayed in the container.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// 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);
</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>