Module is fundamentally a building block for other UI controls. The concepts presented in this example will form the basis for the way that you interact with all of its subclasses.
Note that to avoid using the global variable space, we are placing our example Modules into the YAHOO.example.container namespace. For more information about namespacing, see the YAHOO Global object.
Because "module1" is already in the document, the call to the render method requires no arguments. On the other hand, "module2" does not have any markup in the document. This means that the node where the new Module should be appended must be passed to render. In this case, we simply append "module2" to "document.body".
To see our newly created Modules more easily, we can add a style block that defines custom CSS for the "module" CSS class. By default, Module doesn't come with any predefined styles, so it is up to you as a developer to provide any applicable styles. Our style block will define the "module" CSS class such that Modules and each of their child elements will have distinct border colors:
Finally, we will add some HTML buttons to the page and wire them (using the YUI Event Utility) to the Modules' show and hide methods: