JavaScript DHTML/Ajax Layer/DOM Utilities

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

DOM Example: getElementsByClassName

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: getElementsByClassName</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">
YAHOO.namespace("example.dom");
YAHOO.example.dom.init = function() {
   var count = function(e) {
      var elements = YAHOO.util.Dom.getElementsByClassName("test");
      alert(elements.length);
   };
   
   YAHOO.util.Event.addListener(document, "click", count);
};
YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css">
</head>
<body>
<div id="doc">
   <h1>DOM Example: getElementsByClassName</h1>
   <p>This example demonstrates how to use Dom.getByClassName to get a collection of elements with a particular class name.</p>
   <p>Click anywhere to test.</p>
   <div class="test">div class=&quot;test&quot;</div>
   <div class="test2 test">div class=&quot;test2 test&quot;</div>
   <div class="test test2">div class=&quot;test test2&quot;</div>
   <div class="test ">div class=&quot;test &quot;</div>   
   <div class=" test ">div class=&quot; test &quot;</div>
   <div class=" test2 test">div class=&quot; test2 test&quot;</div>
   <div class="test test2 ">div class=&quot;test test2 &quot;</div>    
   <div class="test2 test ">div class=&quot;test2 test &quot;</div>  
   <div class=" test2 test">div class=&quot; test2 test&quot;</div>   
   <div class=" test2 test ">div class=&quot; test2 test &quot;</div>   
   <div class="test3 test2 test">div class=&quot;test3 test2 test&quot;</div>  
   <div class="test2 test3">div class=&quot;test2 test3&quot;</div>                   
</div>

</body>
</html>


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


DOM Example: getStyle

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: getStyle</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">
YAHOO.namespace("example.dom");
YAHOO.example.dom.init = function() {
   var change = function(e) {
      var bgColor = YAHOO.util.Dom.getStyle("end", "backgroundColor");
      YAHOO.util.Dom.setStyle("test", "backgroundColor", bgColor);
   };
   
   YAHOO.util.Event.addListener(document, "click", change);
};
YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css">
</head>
<body>
<div id="doc">
   <h1>DOM Example: getStyle</h1>
   <p>This example demonstrates how to use Dom.getStyle to get the current style of an element.</p>
   <p>Click anywhere to get the background color of the red element and apply it to the gray element.</p>
   <div id="test"></div>
   <div id="end"></div>
</div>

</body>
</html>



DOM Example: getXY

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: getXY</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">
YAHOO.namespace("example.dom");
YAHOO.example.dom.init = function() {
   var move = function(e) {
      var xy = YAHOO.util.Dom.getXY("end");
      YAHOO.util.Dom.setXY("test", xy);
   };
   
   YAHOO.util.Event.addListener(document, "click", move);
};
YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css">
</head>
<body>
<div id="doc">
   <h1>DOM Example: getXY</h1>
   <p>This example demonstrates how to use Dom.getXY to get an elements position.</p>
   <p>Click anywhere and the grey element will move to the red element.</p>
   <div id="test"></div>
   <div id="end"></div>
</div>

</body>
</html>


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


DOM Example: hasClass

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: hasClass</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">
YAHOO.namespace("example.dom");
YAHOO.example.dom.init = function() {
   var test = function(e) {
      alert(YAHOO.util.Dom.hasClass("test", "foo"));
   };
   
   YAHOO.util.Event.addListener(document, "click", test);
};
YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css">
</head>
<body>
<div id="doc">
   <h1>DOM Example: hasClass</h1>
   <p>This example demonstrates how to use Dom.hasClass to test whether a class is assigned to a given element.</p>
   <p>Click anywhere to test.</p>
   <div class="foo2 foo bar" id="test"></div>                  
</div>

</body>
</html>


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


DOM Example: removeClass

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: removeClass</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">
YAHOO.namespace("example.dom");
YAHOO.example.dom.init = function() {
   var remove = function(e) {
      YAHOO.util.Dom.removeClass("test", "foo");
      alert(document.getElementById("test").className);
   };
   
   YAHOO.util.Event.addListener(document, "click", remove);
};
YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css">
</head>
<body>
<div id="doc">
   <h1>DOM Example: removeClass</h1>
   <p>This example demonstrates how to use Dom.addClass to remove a class from a given element.</p>
   <p>Click anywhere to test.</p>
   <div class="bar foo" id="test"></div>
</div>

</body>
</html>


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


DOM Example: setStyle

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: setStyle</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">
YAHOO.namespace("example.dom");
YAHOO.example.dom.init = function() {
   var fade = function(e) {
      YAHOO.util.Dom.setStyle("fade", "opacity", .5);
   };
   
   YAHOO.util.Event.addListener(document, "click", fade);
};
YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css">
</head>
<body>
<div id="doc">
   <h1>DOM Example: setStyle</h1>
   <p>This example demonstrates how to use Dom.setStyle to set the opacity of an element.</p>
   <p>Click anywhere to set the element"s opacity.</p>
   <div id="fade">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat </div>
</div>

</body>
</html>


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


DOM Example: setXY

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: setXY</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">
YAHOO.namespace("example.dom");
YAHOO.example.dom.init = function() {
   var move = function(e) {
      var xy = [YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)];
      YAHOO.util.Dom.setXY("test", xy);
   };
   
   YAHOO.util.Event.addListener(document, "click", move);
};
YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css">
</head>
<body>
<div id="doc">
   <h1>DOM Example: setXY</h1>
   <p>This example demonstrates how to use Dom.setXY to set an elements position.</p>
   <p>Click anywhere and the element will move to the click point.</p>
   <div id="test"></div>
</div>

</body>
</html>


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


DOM Utilities: addClass

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: addClass</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">
YAHOO.namespace("example.dom");
YAHOO.example.dom.init = function() {
   var add = function(e) {
      YAHOO.util.Dom.addClass("test", "bar");
      alert(document.getElementById("test").className);
   };
   
   YAHOO.util.Event.addListener(document, "click", add);
};
YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css">
</head>
<body>
<div id="doc">
   <h1>DOM Example: addClass</h1>
   <p>This example demonstrates how to use Dom.addClass to add a class to a given element.</p>
   <p>Click anywhere to test.</p>
   <div class="foo" id="test"></div>                  
</div>

</body>
</html>


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


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>


<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/DOM_Utilities&oldid=1713»