Module Example : DOM Utilities « Ajax Layer « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » Ajax Layer » DOM Utilities 
Module Example


<!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.Module</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>

<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/module.css" />

<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container_core.js"></script>

<style>

</style>

<script language="javascript">
  
  YAHOO.namespace("example.module");

  YAHOO.example.module.modules = [];

  function init() {
    
    // *****************************************************************
    // This represents a Overlay already on the page
    // *****************************************************************

      YAHOO.example.module.mPredefined = new YAHOO.widget.Module("mPredefined"{visible:true} );
      YAHOO.example.module.mPredefined.render();

    // *****************************************************************
    // This represents an Overlay completely pre-constructed from code
    // *****************************************************************

      YAHOO.example.module.mDynamic = new YAHOO.widget.Module("mDynamic"{visible:true} );

      YAHOO.example.module.mDynamic.setHeader("Completely dynamic overlay");
      YAHOO.example.module.mDynamic.setBody("I was created completely at runtime!");

      YAHOO.example.module.mDynamic.render(document.getElementById("mainBody"));

    // *****************************************************************
    // This represents a overlay with a container, but no body content defined
    // *****************************************************************
      YAHOO.example.module.mChangedAtRuntime = new YAHOO.widget.Module("mChangedAtRuntime"{visible:true} );

      YAHOO.example.module.mChangedAtRuntime.setHeader("I was changed at runtime!");
      YAHOO.example.module.mChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
      YAHOO.example.module.mChangedAtRuntime.setFooter("The footer was changed too!");

      YAHOO.example.module.mChangedAtRuntime.render();
    // *****************************************************************

    YAHOO.example.module.modules["mPredefined"= YAHOO.example.module.mPredefined;
    YAHOO.example.module.modules["mDynamic"= YAHOO.example.module.mDynamic;
    YAHOO.example.module.modules["mChangedAtRuntime"= YAHOO.example.module.mChangedAtRuntime;


    var btnShow = document.getElementById("btnShow");
    btnShow.onclick = showAll;

    var btnHide = document.getElementById("btnHide");
    btnHide.onclick = hideAll;
  }

  function hideAll() {
    for (var i in YAHOO.example.module.modules) {
      var m = YAHOO.example.module.modules[i];
      m.hide();
    }
  }

  function showAll() {
    for (var i in YAHOO.example.module.modules) {
      var m = YAHOO.example.module.modules[i];
      m.show();
    }
  }
  function create() {
    var form = document.forms["overlayform"];

    // get form values
    var id = form["id"].value;
    
    var header = form["header"].value;
    var body form["body"].value;
    var footer = form["footer"].value;

    var visible = form["visible"].checked;

    var args = {};
    args.visible = visible;

    var newMod;
    var isNew = true;

    if (YAHOO.example.module.modules[id]) {
      newMod = YAHOO.example.module.modules[id];
      newMod.cfg.applyConfig(args);
      isNew = false;
    else {
      newMod = new YAHOO.widget.Module(id, args);
      YAHOO.example.module.modules[id= newMod;
    }

    if (header) {
      newMod.setHeader(header);
    }
    if (body) {
      newMod.setBody(body);
    }
    if (footer) {
      newMod.setFooter(footer);
    }
    
    if (isNew) {
      newMod.render(document.getElementById("mainBody"));
    else {
      newMod.render();
    }
  }

  YAHOO.util.Event.addListener(window, "load", init);

</script>
</head>
<body>

  <div class="box">
    <div class="hd">
      <h1>Module Example</h1>
    </div>
    <div class="bd" id="mainBody">
    
      <button id="btnHide">Hide All</button>
      <button id="btnShow">Show All</button>

      <div id="content">
        <p>A Module is an object representation of Yahoo!'s Standard Module Format. A Module can optionally contain three elements (but must include at least one): a header, a body, and a footer, each which are denoted by CSS classes: "hd""bd", and "ft" respectively. An empty module would look like this:</p>
<xmp><div id="myModule">
   <div class="hd"></div>
   <div class="bd"></div>
   <div class="ft"></div>
</div></xmp>
        <p>Modules can be constructed by attaching the Module object to pre-existing markup, or dynamically creating them from scratch and appending them to the DOM. The code to create a Module around that markup would look as simple as this:
          <code>myModule = new YAHOO.widget.Module("myModule");</code>
        </p>
        <p>A Module can be dynamically created by passing the arbitrary ID of the Module to create into the constructor, setting some content, and rendering the Module using the render method, passing in the node that the Module should be appended to, as in this example:
          <code>
            myDynamicModule = new YAHOO.widget.Module("myDynamicModule");<br/>
            myDynamicModule.setBody("Here's some body content.");<br/>
            myDynamicModule.render(document.getElementById("dynamic"));<br/>
          </code>
        </p>
        <p>Here are some example modules, including the one from above:</p>
      </div>

  <div id="mPredefined" class="module">
    <div class="hd">Predefined Module Header</div>
    <div class="bd">I was created using simple predefined markup.</div>
    <div class="ft">Predefined Module Footer</div>
  </div>

  <div id="mChangedAtRuntime" class="module">
    <div class="hd">Placeholder Header</div>
    <div class="bd">This is only placeholder text in the markup.</div>
    <div class="ft">Placeholder Footer</div>
  </div>
      <div id="dynamic"></div>

    </div>
    <div class="ft"></div>
  </div>

<form onsubmit="return false" id="overlayform">
<div class="overlayform">

  <div class="formheader">
      Create / Modify a Dynamic Module
    </div>

  <div class="row header">
      <div class="label" style="text-align:center">Property</div><div class="formw">Value</div>
    </div>

  <div class="row first">
      <div class="label">ID</div><div class="formw"><input type="text" name="id" /></div>
    </div>

  <div class="row">
      <div class="label">Visible</div><div class="formw"><input type="checkbox" name="visible" value="checkbox" checked="true"/></div>
    </div>

  <div class="row first">
      <div class="label">Header</div><div class="formw"><textarea name="header"></textarea></div>
    </div>

  <div class="row first">
      <div class="label">Body</div><div class="formw"><textarea name="body"></textarea></div>
    </div>

  <div class="row first">
      <div class="label">Footer</div><div class="formw"><textarea name="footer"></textarea></div>
    </div>

  <div class="row last">
      <div class="label"></div><div class="formw"><button onclick="create()">create/modify my Module</button></div>
  </div>

</div>
</form>

</body>
</html>

           
       
yui.zip( 3,714 k)
Related examples in the same category
1. DOM Utilities: addClass
2. DOM Example: getElementsByClassName
3. DOM Example: getStyle
4. DOM Example: getXY
5. DOM Example: hasClass
6. DOM Example: removeClass
7. DOM Example: setStyle
8. DOM Example: setXY
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.