JavaScript DHTML/Scriptaculous/Clone

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

prototype.js Position.clone functional test

   <source lang="html4strict">

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


<html xmlns="" xml:lang="en" lang="en">

   <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; }
   abs-body child

unpositioned p

   <script type="text/javascript" language="javascript">
   function d(el, marker) {
     $("debug").innerHTML = 
       "orig:  " + Object.inspect($(el))) + ", " +
       "clone: " + Object.inspect($(marker)));
   function testA(el) {
     Position.clone(el, "marker");
     d(el, "marker");
   function testB(el) {
     Position.clone(el, "marker2");"marker2");
     d(el, "marker2");
   function testC(el) {
     Position.clone(el, "marker3");
     d(el, "marker3");
   function testD(el) {
     Position.clone(el, "marker4");
     d(el, "marker4");
     <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> |