JavaScript DHTML/Scriptaculous/Fade
Содержание
Fade in and out
<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.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/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>
Text effect: appear, fade, drop out, highlight
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title>
<script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>
<style>
div#many_test span { font-size:40pt; color: white; background:black; width:100px; float:left; position: relative; }
</style>
</head> <body>
Maybe this is useful? <img src="icon.png" alt="blah"/> Dunno...
<a href="#" onclick="Effect.multiple("h1_text", Effect.Appear, {speed:0.05, afterFinishInternal:function(){}}); return false;">Appear</a> |
<a href="#" onclick="Effect.multiple("h1_text", Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
<a href="#" onclick="Effect.multiple("h1_text", Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a> |
<a href="#" onclick="alert($("h1_text").innerHTML); return false;">show H1 innerHTML</a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
THIS IS A WARNING!
<a href="#" onclick="Effect.multiple("p_text", Effect.Appear, {speed:0.05, afterFinishInternal:function(){}}); return false;">Appear</a> | <a href="#" onclick="Effect.multiple("p_text", Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> | <a href="#" onclick="Effect.multiple("p_text", Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a>
<a href="#" onclick="Effect.multiple("many_test", Effect.Appear, {speed:0.5, duration:3.0, afterFinishInternal:function(){}}); return false;">Appear</a> |
<a href="#" onclick="Effect.multiple("many_test", Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
<a href="#" onclick="Effect.multiple($("many_test").childNodes, Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a> |
<a href="#" onclick="Effect.multiple($("many_test").childNodes, Effect.Highlight, {speed:0.07, afterFinishInternal:function(){}}); return false;">Highlight</a> |
<a href="#" onclick="Effect.multiple($("many_test").childNodes, Effect.BlindDown, {speed:0.15, afterFinishInternal:function(){}}); return false;">BlindDown</a>
<script type="text/javascript" language="javascript">
Effect.tagifyText("h1_text");
Effect.tagifyText("p_text");
Effect.tagifyText("many_test");
</script>
<a href="#" onclick="Effect.multiple(document.getElementsByTagName("span"), Effect.Fade, {speed:0.04, afterFinishInternal:function(){}}); return false;">Fade all spans on page</a>
<p> </body> </html> </source>
