YUI "Loading" Panel and ProgressBar

QiaoDuanni

浏览: 136851 次
性别:
来自: 杭州

最近访客更多访客>>

wayng1987

log4j

liangzi_001

bobodare

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

YUI Yahoo CSS PHP 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">
<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>

分享到：

google docs的异常(2009/12/16 | ubuntu下eclipse ctrl+k快捷键冲突

2009-10-12 17:59
浏览 1567
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

YUI "Loading" Panel and ProgressBar

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

YUI "Loading" Panel and ProgressBar

评论

发表评论

相关推荐

使用YUI的网站

yui grid css 1/6 – 1/6 – 1/12 – 1/12 – 1/6 – 1/6 – 1/6

yui grid css 1/8 – 1/8 – 1/8 – 1/8 – 1/6 – 1/6 – 1/6

yui grid css 1/6-1/6-1/6-1/6-1/3

yui grid css 1/8-1/8-1/8-1/8-1/2

最近访客更多访客>>