<!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>Creating a Modal "Loading" Panel</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/slider/assets/skins/sam/slider.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/progressbar/assets/skins/sam/progressbar.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/slider/slider-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/progressbar/progressbar-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/container/container-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Creating a Modal "Loading" Panel</h1>
<div class="exampleIntro">
<p>A common use case for the Panel Control involves using it to display "please wait" text and images to indicate that the application is busy doing something. As this page loads, a modal "please wait"-style Panel Control instance appears and the remainder of the page dims. When the content for the container is loaded (consisting of lorem ipsum text), the panel and its modaliy mask fade away and the page returns to a normal interactive state.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="content"></div>
<script type="text/javascript">
YAHOO.namespace("example.container");
function init() {
var content = document.getElementById("content");
content.innerHTML = "";
if (!YAHOO.example.container.wait) {
// 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,
zindex:4,
modal: true,
visible: false
}
);
YAHOO.example.container.wait.setHeader("Loading, please wait...");
YAHOO.example.container.wait.setBody("<div id=\"loading-progress\"></div>");
YAHOO.example.container.wait.render(document.body);
}
var pb = new YAHOO.widget.ProgressBar({anim : true}).render('loading-progress');
// Define the callback object for Connection Manager that will set the body of our content area when the content has loaded
// Show the Panel
YAHOO.example.container.wait.show();
setTimeout(function(){
YAHOO.example.container.wait.setHeader("test 2");
pb.set("value", 30);
} ,3000);
// 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.on("panelbutton", "click", init);
</script>
<button id="panelbutton">Show Panel</button>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
YUI "Loading" Panel and ProgressBar
最新推荐文章于 2022-09-10 16:20:00 发布