JavaScript DHTML/Scriptaculous/Slide
Содержание
Click header to slide 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">
<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.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>
</body> </html>
</source>
Effect: SlideDown
<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> <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_down",{duration:1.5}) }); return false;">SlideDown</a>
</body> </html>
</source>
Effect: SlideUp
<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> <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> |
</body> </html>
</source>
Startto slide down/up, cancel
<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 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>