35 lines
2.2 KiB
HTML
35 lines
2.2 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Test for Manuel Lemos's PHP form class using the animation plug-in</title>
|
||
|
|
<script type="text/javascript" src="animation.js"></script>
|
||
|
|
</head>
|
||
|
|
<body bgcolor="#cccccc">
|
||
|
|
<center><h1>Test for Manuel Lemos's PHP form class using the animation plug-in</h1></center>
|
||
|
|
<hr />
|
||
|
|
<form method="post" action="" name="animation_form">
|
||
|
|
<div style="text-align: center">Click to <input type="button" value="fade out" onclick="var a=new ML.Animation.Animate(); a.addAnimation({ name: 'Hide form', debug: 1, effects: [ { type: 'CancelAnimation', animation: 'Show form' }, { type: 'ReplaceContent', element: 'feedback', content: 'Hiding...' }, { type: 'FadeOut', element: 'wholeform', duration: 0.5 }, { type: 'ReplaceContent', element: 'feedback', content: 'The form is hidden!' } ] }); ; return true" id="hide" /> or <input type="button" value="fade in" onclick="var a=new ML.Animation.Animate(); a.addAnimation({ name: 'Show form', debug: 1, effects: [ { type: 'CancelAnimation', animation: 'Hide form' }, { type: 'ReplaceContent', element: 'feedback', content: 'Showing...' }, { type: 'FadeIn', element: 'wholeform', duration: 0.5 }, { type: 'ReplaceContent', element: 'feedback', content: 'The form is visible!' } ] }); ; return true" id="show" /> the form.</div>
|
||
|
|
<br />
|
||
|
|
<center><table style="width: 24em">
|
||
|
|
<tr>
|
||
|
|
<td style="font-weight: bold; width: 1%">Feedback:</td>
|
||
|
|
<td id="feedback" style="border-width: 1px; border-style: solid; border-top-color: #868686; border-right-color: #F9F9F9; border-bottom-color: #F9F9F9; border-left-color: #868686; padding: 3px">Click in the show or hide buttons</td>
|
||
|
|
</table></center>
|
||
|
|
<br />
|
||
|
|
<center><table id="wholeform" style="border-width: 1px; border-style: solid; background-color: #c0c0c0; border-top-color: #F9F9F9; border-right-color: #868686; border-bottom-color: #868686; border-left-color: #F9F9F9; padding: 0px;">
|
||
|
|
<tr>
|
||
|
|
<td style="background-color: #000080; padding: 2px; color: #ffffff; font-weight: bold">Form class animation test</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td><fieldset>
|
||
|
|
<legend style="font-weight: bold">Example form would show here</legend>
|
||
|
|
<div style="text-align: center; padding: 2px">Some fields would go here.</div>
|
||
|
|
</fieldset></td>
|
||
|
|
</tr>
|
||
|
|
</table></center>
|
||
|
|
</form>
|
||
|
|
<hr />
|
||
|
|
</body>
|
||
|
|
</html>
|