JavaScript DHTML/Scriptaculous/Clone

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

prototype.js Position.clone functional test

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>
   <title>prototype.js Position.clone functional test</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
   <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
   <style type="text/css">
     .margins   { margin:20px; }
     .nomargins { margin:0; }
   </style>
 </head>
 <body>
      abs
      rel
      static
   abs-body child

unpositioned p

   <script type="text/javascript" language="javascript">
   
   function d(el, marker) {
     $("debug").innerHTML = 
       "orig:  " + Object.inspect(Position.page($(el))) + ", " +
       "clone: " + Object.inspect(Position.page($(marker)));
   }
   function testA(el) {
     Position.clone(el, "marker");
     d(el, "marker");
   }
   function testB(el) {
     Element.hide("marker2");
     Position.clone(el, "marker2");
     Element.show("marker2");
     d(el, "marker2");
   }
   function testC(el) {
     Position.clone(el, "marker3");
     d(el, "marker3");
   }
   function testD(el) {
     Position.clone(el, "marker4");
     d(el, "marker4");
   }
   
   </script>
     <a href="#" onclick="Element.toggle("big"); return false;">Toggle page scrolling</a> |
     Page margings: <a href="#" onclick="document.body.className = "margins"">on</a> |
     <a href="#" onclick="document.body.className = "nomargins"">off</a>
     

Absolute marker in position:relative container DIV:
<a href="#" onclick="testA("test1"); return false;">Mark abs</a> | <a href="#" onclick="testA("test2"); return false;">Mark rel</a> | <a href="#" onclick="testA("test3"); return false;">Mark static</a> | <a href="#" onclick="testA("c3"); return false;">Mark abs-body child</a> | <a href="#" onclick="testA("p1"); return false;">Mark p</a>

Hidden marker (display:none), in position:relative container DIV switched on when clone is finished:
<a href="#" onclick="testB("test1"); return false;">Mark abs</a> | <a href="#" onclick="testB("test2"); return false;">Mark rel</a> | <a href="#" onclick="testB("test3"); return false;">Mark static</a> | <a href="#" onclick="testB("c3"); return false;">Mark abs-body child</a> | <a href="#" onclick="testB("p1"); return false;">Mark p</a>

Absolute marker, child of BODY:
<a href="#" onclick="testC("test1"); return false;">Mark abs</a> | <a href="#" onclick="testC("test2"); return false;">Mark rel</a> | <a href="#" onclick="testC("test3"); return false;">Mark static</a> | <a href="#" onclick="testC("c3"); return false;">Mark abs-body child</a> | <a href="#" onclick="testC("p1"); return false;">Mark p</a>

Fixed marker, child of BODY:
<a href="#" onclick="testD("test1"); return false;">Mark abs</a> | <a href="#" onclick="testD("test2"); return false;">Mark rel</a> | <a href="#" onclick="testD("test3"); return false;">Mark static</a> | <a href="#" onclick="testD("c3"); return false;">Mark abs-body child</a> | <a href="#" onclick="testD("p1"); return false;">Mark p</a> |
!


!
!
 </body>

</html>

 </source>