YUI Library JavaScript DHTML





    
The Module Control

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








The Module Control



  

This example looks at the "standard module format" used by many components in YUI to represent modular content on the page.  The Module Control is a JavaScript representation of a standard module, one that provides some basic plumbing for interacting with the head, body and foot sections of a standard module.  Convenience methods for showing, hinding and rendering the module are also included in the Module Control.


You're most likely to use the Module Control when building a custom widget; its importance in the YUI Library is as a foundation rather than as a UI control in its own right.

      



  .yui-module { border:1px dotted black;padding:5px;margin:10px; display:none; }
  .yui-module .hd { border:1px solid red;padding:5px; }
  .yui-module .bd { border:1px solid green;padding:5px; }
  .yui-module .ft { border:1px solid blue;padding:5px; }


    YAHOO.namespace("example.container");
    YAHOO.util.Event.onDOMReady(function () {
        YAHOO.example.container.module1 = new YAHOO.widget.Module("module1", { visible: false });
        YAHOO.example.container.module1.render();
        YAHOO.example.container.module2 = new YAHOO.widget.Module("module2", { visible: false });
        YAHOO.example.container.module2.setHeader("Module #2 from Script");
        YAHOO.example.container.module2.setBody("This is a dynamically generated Module.");
        YAHOO.example.container.module2.setFooter("End of Module #2");
        YAHOO.example.container.module2.render();
        YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.module1.show, YAHOO.example.container.module1, true);
        YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.module1.hide, YAHOO.example.container.module1, true);
        YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.module2.show, YAHOO.example.container.module2, true);
        YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.module2.hide, YAHOO.example.container.module2, true);
    });


  Show module1 
  Hide module1


  Module #1 from Markup

  This is a Module that was marked up in the document.

  End of Module #1



  Show module2 
  Hide module2





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