Archive for April, 2007|Monthly archive page
Tutorial: How to use Script.aculo.us effects?
Okay, so its been a long time since I have posted any How-To’s. So, I decided to write down one for How to use Script.aculo.us effects?
Script.aculo.us is an javascript library to enhance the UI and the user experience. We are also using the same in our OpenIndx projects as well. I have mentioned it here in my previous post also.
Before, you get to hack this library, grab it from here.
Now, presuming that you have the library with you, lets rock!!!
A simple HTML file : index.html
<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>
<body>
<h2>Hello AJAX Effects</h2>
<div id=”test_this”> {Div which we will be adding effects to}
<table> {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>
</tr>
</table>
</div> {DIV ends}
</body> {Close body}
</html> {Close HTML}
Now, this was just a simple html code to insert a table which will be having fields username, password and submit button.
Lets add some Script.aculo.us effects to this code.
<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>
<body>
<h2>Hello AJAX Effects</h2>
<div id=”test_this”> {Div which we will be adding effects to}
<table> {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>
</tr>
</table>
</div>
<a href=”#” mce_href=”#” onclick=”Effect.Fade(‘test_this’);”> {here ‘test_this’ mention the “div” you need to add effect to} Fade Me</a>
</body>
</html>
Similarly, you can also add other effects, in this flow.
<a href=”#” mce_href=”#” onclick=”Effect.Shake(‘test_this’);”> Shake Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Appear(‘test_this’);”>Appear Back</a>
<a href=”#” mce_href=”#” onclick=”visualeffects(‘test_this’,’slide’);”>Slide Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Grow(‘test_this’);”>See Me Grow</a>
For further reference on effects, please refer here
Do let me know if this helps you, in giving a overview of how-to use Script.aculo.us Effects. Drop in the comments, if you have any suggestions too.
Cheerz
Sridhar
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Now, after CamStudio. its Script.aculo.us + OpenIndx
I was like busy for now 2 weeks, deciding which AJAX library to use with OpenIndx.
I have tried enough of them now, which includes Dojo, OpenRico, YUI, Script.aculo.us.
What features am I looking for in a Javascript AJAX library?
These features are a must for OpenIndx:
Drag-n-Drop
Fade-In/Fade-out
Flexible with PHP
Inline Editors/Multi-Line editor/ Full-Fledge editor integration(TinyMCE/FCkeditor)
Sliders
After all these screening I have decided to go with script.aculo.us.
After All its about UI, Honey!!!
So if you are one who likes the AJAX-powered functionality in WordPress. I must tell you even wordpress is using Script.aculo.us
Who else using Script.aculo.us?
To name some of the key projects WordPress, Apple etc.
So what does it mean anyway?
Expect beautiful UI and powerful functionality.
When will we see it?
Did I tell you the release date is June 07. Yes, it would just be a alpha version with all basic features first. Based on your feedback we will be modifying and adding new features on requests.
okay, so keep hanging around. Be good, Take care
Cheerz
Shri
Comments (5)
Comments (12)
Comments (2)