JavaScript DHTML/Ajax Layer/Text Effects
Содержание
- 1 Fade/Appear effect functional test
- 2 script.aculo.us Fade/Appear effect functional test
- 3 script.aculo.us Effects functional test file
- 4 This
- 5 Is
- 6 Not
- 7 Flash!
- 8 DynAPI 3.0 Rulez!
- 9 Got DynAPI?
- 10 script.aculo.us Effects functional test file
- 11 script.aculo.us Effects functional test file
- 12 script.aculo.us Effects functional test file
- 13 script.aculo.us ScrollTo effect functional test
- 13.1 first-headingHeading 2
- 13.2 Heading 2
- 13.3 Heading 2
- 13.4 Heading 2
- 13.5 Heading 2
- 13.6 Heading 2
- 13.7 Heading 2
- 13.8 Heading 2
- 13.9 Heading 2
- 13.10 Heading 2
- 13.11 Heading 2
- 13.12 Heading 2
- 13.13 DOWN BELOWHeading 2
- 13.14 Heading 2
- 13.15 Heading 2
- 13.16 Heading 2
- 13.17 Heading 2
- 13.18 Heading 2
- 13.19 Heading 2
- 13.20 Heading 2
- 13.21 Heading 2
- 13.22 Heading 2
- 13.23 Heading 2
- 13.24 Heading 2
- 13.25 Heading 2
- 13.26 Heading 2
- 13.27 Heading 2
- 13.28 Heading 2
- 13.29 Heading 2
- 13.30 Heading 2
- 13.31 Heading 2
- 13.32 Heading 2
- 13.33 Heading 2
- 13.34 Text effects: slide down, slide up
- 14 script.aculo.us Effects functional test file
- 15 script.aculo.us Effects functional test file
Fade/Appear effect 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>script.aculo.us Effects functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
</head> <body>
script.aculo.us Fade/Appear effect functional test
Note: these tests use the browser default CSS style rules.
DIV
<a href="#" onclick="Effect.Fade("test_div"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_div"); return false;">Effect.Appear</a>
SPAN
TEST
<a href="#" onclick="Effect.Fade("test_span"); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear("test_span"); return false;">Effect.Appear</a>
P
TEST
<a href="#" onclick="Effect.Fade("test_p"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_p"); return false;">Effect.Appear</a>
IMG
<img id="test_img" src="icon.png" alt="test image" />
<a href="#" onclick="Effect.Fade("test_img"); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear("test_img"); return false;">Effect.Appear</a>
The following elements are not supported with Fade/Appear on all browsers!
TABLE
TEST |
<a href="#" onclick="Effect.Fade("test_table"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_table"); return false;">Effect.Appear</a>
TBODY
TEST |
<a href="#" onclick="Effect.Fade("test_tbody"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_tbody"); return false;">Effect.Appear</a>
TR
TEST |
<a href="#" onclick="Effect.Fade("test_tr"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_tr"); return false;">Effect.Appear</a>
TD
TEST |
<a href="#" onclick="Effect.Fade("test_td"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_td"); return false;">Effect.Appear</a> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Highlight text dynamically
<source lang="html4strict">
<html> <head> <title>DynAPI Examples - DynLayer Anchor - Anchoring</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); </script> <script language="Javascript"> cnt=0; w = new DynLayer(" ",-10,-10,20,18); // use negative x,y to hide layer during ns4 resize (or reload) w.setAnchor({topA:"c",leftA:"c",stretchH:120,stretchV:28}); w.__a=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__b=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__c=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__d=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__a.setAnchor({stretchH:"100%",stretchV:2,top:0}) w.__b.setAnchor({stretchH:2,stretchV:"100%",right:0}) w.__c.setAnchor({stretchH:"100%",stretchV:2,bottom:0}) w.__d.setAnchor({stretchH:2,stretchV:"100%",left:0}) window.setTimeout("setColor()",200); dynapi.document.addChild(w); function setColor() {
var color="#ffcc00"; cnt++ if (cnt>4)cnt=1; if(cnt==1) w.__a.setBgColor(color); else w.__a.setBgColor("#000000"); if(cnt==2) w.__b.setBgColor(color); else w.__b.setBgColor("#000000"); if(cnt==3) w.__c.setBgColor(color); else w.__c.setBgColor("#000000"); if(cnt==4) w.__d.setBgColor(color); else w.__d.setBgColor("#000000"); window.setTimeout("setColor()",300);
} function setAnchor(t){
if(t=="a") w.setAnchor({topA:"a",leftA:"a",stretchH:90,stretchV:18}); if(t=="b") w.setAnchor({topA:"b",leftA:"b",stretchH:100,stretchV:18}); if(t=="c") w.setAnchor({topA:"c",leftA:"c",stretchH:120,stretchV:28}); if(t=="d") w.setAnchor({topA:"d",leftA:"d",stretchH:120,stretchV:35}); if(t=="e") w.setAnchor({topA:"e",leftA:"e",stretchH:80,stretchV:18}); if(t=="f") w.setAnchor({topA:"f1",leftA:"f1",bottomA:"f3",rightA:"f2",stretchH:"*",stretchV:"*"});
} </script> </head> <body bgcolor="#FFFFFF"> <script> dynapi.document.insertAllChildren(); </script>
Anchoring/Docking
Change Anchor
Location <a href="javascript:setAnchor("a")">Anchor A</a> <a href="javascript:setAnchor("b")">Anchor B</a> <a href="javascript:setAnchor("c")">Anchor C</a> <a href="javascript:setAnchor("d")">Anchor D</a> <a href="javascript:setAnchor("e")">Anchor E</a> <a href="javascript:setAnchor("f")">Anchor F</a> Resize the browser to see the changes
<p align="center">
topA |
<p>A example of an anchor : <a name="myname" id="myname"> </a> <p>Some text here, some more text here some text here, some more text here. some more text here some text here, some more text here. <a id="a" name="a">AnchorHere</a> some more text here some text here, some more text here. some more text here some text here, some more text here. some more text here some text here, some more text here. <a id="b" name="b">AnchorHere</a><p>And more text here some text here, some more text here. some more text here some text here, some more text here. some more text here some text here, some more text here. some more text here some text here, some more text here. some more text here some text here, some more text here.some more text here <a id="c" name="c">MoreText</a> some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here. |
|||||||||||||
|
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Rainbow highligher
<source lang="html4strict">
<html> <head> <title>DynAPI Examples - Highlighter</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.functions.Color"); dynapi.library.include("dynapi.gui.Highlighter"); </script> <script language="Javascript"> var x=0,y=50,c=0,lyr,clr,inc=1; var d1=new Date(); for(var i=0;i<300;i++){
y+=inc; if(y>200) inc*=-1; x=50+c*1; c+=1; if (i<=100) clr=dynapi.functions.fadeColor("#0000FF","#FF0000",i); else if (i>100 && i<=200) clr=dynapi.functions.fadeColor("#FF0000","#00FF00",i-100); else clr=dynapi.functions.fadeColor("#00FF00","#FFFFFF",(i-200)); lyr=new Highlighter(x,y,1,50,clr); dynapi.document.addChild(lyr);
} dynapi.onLoad(init); function init(){
var d2=new Date(); document.frm.txt.value = i+" layers in "+(d2-d1)+" milliseconds";
} </script> </head> <body> <form name="frm">Speed: <input type="text" size="50" name="txt" value="loading..."> </form> <script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Text BlindUp and BlindDown
<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>script.aculo.us Effects functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> <style type="text/css" media="screen"> #d1 { background-color: #888; } </style>
</head> <body>
script.aculo.us Effects functional test file
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("blind_up","d1",{duration:1.5}) }); return false;">BlindUp</a> | <a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("blind_down",{duration:1.5}) }); return false;">BlindDown</a> |
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Text color fade in
<source lang="html4strict">
<html> <head> <title>DynAPI Examples - Fader</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("Fader"); </script> <script language="Javascript">
var lyr1=new DynLayer("This
",0,0,100,100); var lyr2=new DynLayer("Is
",300,200,100,100); var lyr3=new DynLayer("Not
",0,50,100,100); var lyr4=new DynLayer("Flash!
",400,250,100,100); var lyr5=new DynLayer("DynAPI 3.0 Rulez!
",100,300,300,100); var lyr6=new DynLayer("Got DynAPI?
",400,100,200,100);dynapi.document.addChild(lyr1); dynapi.document.addChild(lyr2); dynapi.document.addChild(lyr3); dynapi.document.addChild(lyr4); dynapi.document.addChild(lyr5); dynapi.document.addChild(lyr6); lyr1.setVisible(false); lyr2.setVisible(false); lyr3.setVisible(false); lyr4.setVisible(false); lyr5.setVisible(false); lyr6.setVisible(false); dynapi.onLoad(function(){
lyr1.fadeIn(); lyr1.slideTo(100,100); lyr1.addEventListener({ onfadein:function(e){ lyr2.fadeIn(); lyr2.slideTo(170,100); } }); lyr2.addEventListener({ onfadein:function(e){ lyr3.fadeIn(); lyr3.slideTo(200,100); } }); lyr3.addEventListener({ onfadein:function(e){ lyr4.fadeIn();lyr4.slideTo(260,100); } }); lyr4.addEventListener({ onfadein:function(e){ lyr1.fadeOut(); lyr2.fadeOut(); lyr3.fadeOut(); lyr4.fadeOut(); }, onfadeout:function(e){ window.setTimeout("lyr5.fadeIn();lyr5.slideTo(null,100);",600); } }); lyr5.addEventListener({ onfadein:function(e){ window.setTimeout("lyr5.fadeOut();lyr5.slideTo(400,100);",600); }, onfadeout:function(e){ window.setTimeout("lyr6.fadeIn();lyr6.slideTo(150,100);",100); } });
}); </script> </head> <body> <script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Text Effects: highlight
<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>script.aculo.us Effects functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> <style type="text/css" media="screen"> #d1 { background-color: #888; } </style>
</head> <body>
script.aculo.us Effects functional test file
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("highlight",{duration:1.5}) }); return false;">Highlight</a> |
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Text effects: outlook bar
<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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css">
- menu {
width: 300px; border: 1px #000 solid;
} .menu_header {
background-color: #00CC99; color: #FFFFFF;
} .menu_block {
background-color: #006699; color: #FFFFFF; overflow:hidden;
} .menu_block div { } .close_block {
position: relative; width: 100%; bottom: 0px; height: 15px; text-align: center; display: block;
} </style> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> </head> <body>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Text Effects: Puff
<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>script.aculo.us Effects functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> Position.includeScrollOffsets = true; </script>
<body>
script.aculo.us Effects functional test file
Effect.Puff
click to test puff, no position set
click to test puff, floats
click to test puff, absolute position set
Floating inside a container
click to puff
click to puff
click to puff
click to puff
click to puff
click to puff
click to puff
click to puff
click to puff
</div> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Text effects: Scale X only, Scale Y only, Scale X and Y
<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>script.aculo.us Effects functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> <style type="text/css" media="screen"> #scaleable { background-color: #888; } </style>
</head> <body>
script.aculo.us Effects functional test file
<a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: true, scaleY: false }); return false;">Scale X only</a> | <a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: false, scaleY: true }); return false;">Scale Y only</a> | <a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: true, scaleY: true }); return false;">Scale X and Y</a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Text effects: scroll (slow-motion) down-below, scroll last-heading
<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>script.aculo.us Effects functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
</head> <body>
script.aculo.us ScrollTo effect functional test
<a href="#" onclick="new Effect.ScrollTo("down-below",{duration:5.0}); return false;">scroll (slow-mo) down-below...</a>, <a href="#" onclick="new Effect.ScrollTo("last-heading"); return false;">scroll last-heading</a>
first-headingHeading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
DOWN BELOWHeading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
<a href="#" onclick="new Effect.ScrollTo("first-heading"); return false;">scroll...</a>
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Text effects: slide down, slide up
<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>script.aculo.us Effects functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
</head> <body>
script.aculo.us Effects functional test file
Effect.SlideDown/Effect.SlideUp
<script type="text/javascript" language="javascript" charset="utf-8">
var effect_1 = null;
</script> <a href="#" onclick="effect_1 = Effect.SlideDown("d1",{duration:1.0}); return false;">Start slide down</a> | <a href="#" onclick="effect_1 = Effect.SlideUp("d1",{duration:1.0}); return false;">Start slide up</a> | <a href="#" onclick="effect_1.cancel(); return false;">cancel()</a> | <a href="#" onclick="alert(Object.inspect($("d1").firstChild.style)); return false;">inspect()</a> | <a href="#" onclick="$("d1").firstChild.innerHTML += $("d1").firstChild.innerHTML; return false;">add content</a>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Text: Slide Up and Slide Down
<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>script.aculo.us Effects functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> <style type="text/css" media="screen"> #d1 { background-color: #888; } </style>
</head> <body>
script.aculo.us Effects functional test file
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("slide_up",{duration:1.5}) }); return false;">SlideUp</a> | <a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("slide_down",{duration:1.5}) }); return false;">SlideDown</a>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>