YUI Library JavaScript DHTML


            



    
Creating a Modal "Loading" Panel

/*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;
}











Creating a Modal "Loading" Panel


  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.



    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("");
            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 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", "yui_2.7.0b-assets/container-assets/somedata.php?r=" + new Date().getTime(), callback);
    }
    
    YAHOO.util.Event.on("panelbutton", "click", init);
    

Show Panel




   
   
yui_2.7.0b.zip( 4,431 k)