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

upgraded to yui 0.12.0

Browse source 
upgraded to yui-ext 0.33 rc2
This commit is contained in:
JT Smith 2006-11-28 02:23:34 +00:00
parent 62b3d90db7
commit cfd09a5cb6
1271 changed files with 539033 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,123 @@
<!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="../../../docs/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="../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="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

71
www/extras/yui/examples/container/panelwait/2.html Normal file
View file

@ -0,0 +1,71 @@
<!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="../../../docs/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="../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"><a href="1.html">Using Panel as a 'Wait' Indicator</a></li>
<li class="child active"><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">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>Using Panel as a 'Wait' Indicator</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

78
www/extras/yui/examples/container/panelwait/solution.html Normal file
View file

@ -0,0 +1,78 @@
<!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>