JavaScript DHTML/Ajax Layer/Progress Dialog

Материал из Web эксперт
Перейти к: навигация, поиск

Panel wait

   <source lang="html4strict">

<!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=iso-8859-1"> <title>YAHOO.widget.Panel</title> <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/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <script type="text/javascript" src="./build/connection/connection.js" ></script> <link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" /> <link rel="stylesheet" type="text/css" href="./build/reset/reset.css" /> <link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" /> <link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" /> <script type="text/javascript" src="./build/container/container.js"></script> <style>

  1. wait .bd {
 padding:10px 0;
 text-align:center;

}

  1. content {
 margin-top:50px;
 border:1px solid #CCC;
 background-color:white;
 width:400px;
 height:250px;
 margin-left:auto;
 margin-right:auto;
 padding:10px;

} </style> <script language="javascript"> 

 YAHOO.namespace("example.panel");

 function init() {
   YAHOO.example.panel.wait = 
       new YAHOO.widget.Panel("wait", 
               { width:"240px", 
                 fixedcenter:true, 
                 underlay:"shadow", 
                 close:false, 
                 draggable:false, 
                 modal:true, 
                 effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5} 
                 } 
                );
   YAHOO.example.panel.wait.setHeader("Loading, please wait...");
   YAHOO.example.panel.wait.setBody("<img src=\"http://us.i1.yimg.ru/us.yimg.ru/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
   YAHOO.example.panel.wait.render(document.body);
   var callback = {
     success : function(o) {
       document.getElementById("content").innerHTML = o.responseText;
       YAHOO.example.panel.wait.hide();
     },
     failure : function(o) {
       document.getElementById("content").innerHTML = "CONNECTION FAILED!";
       YAHOO.example.panel.wait.hide();
     }
   }
   YAHOO.example.panel.wait.show();
   var conn = YAHOO.util.Connect.asyncRequest("GET", "php/somedata.php?r=" + new Date().getTime(), callback);
 }
 YAHOO.util.Event.addListener(window, "load", init);

</script> </head> <body>

</body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Progress_Dialog&oldid=1689»