script.aculo.us: It is a GUI library built by Thomas Fuchs in 2005 based on Prototype JavaScript Framework to fulfill the need for a library with UI components. It provides cross-browser user interface JavaScript libraries and uses DOM (Document Object Model) to add dynamic visual effects and user interface elements to the dynamic web applications. It works on top of Prototype.js. so the size of the library becomes an issue when we work with big projects.
Example: Here is an example code using Script.aculo.us to fade a text.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0"/>
<script type="text/javascript"
src="./prototype.js">
</script>
<script type="text/javascript"
src="./scriptaculous.js">
</script>
<script type="text/javascript">
// Using Scriptaculous
function fade() {
Effect.Fade("mydiv", {
duration: 1.0,
});
return false;
}
</script>
</head>
<body>
<a href="#" id="mydiv" onClick="fade()">
Geeks For Geeks !
</a>
</body>
</html>
|
Output:
jQuery UI: is built by jQuery Team on top of jQuery and provides elegant visuals and flexible styling and custom theming. jQuery has the larger community support you can find more articles and question tagged with jQuery than Script.aculo.us (Prototype). Most of the developers prefer jQuery UI due to its small and concise code size and huge community support.
Example: Here is an example code using jQuery UI to fade a Text :
<!DOCTYPE html><html>
<head>
<script src=
</script>
</head>
<body>
<div id="geek">Geeks for Geeks</div>
<script>
$(document).click(function () {
$("#geek").toggle("fade");
});
</script>
</body>
</html>
|
Output:
Note: The script.aculo.us seems discontinued due to a lack of developer interest.
Features of jQuery UI:
- Comprehensive browser support jQuery UI supports all major browsers including Internet Explorer versions 7 and up, as well as the latest two versions of Chrome, Firefox, Safari, and Opera.
- jQuery UI follows “WORA” i.e. a programming paradigm which means we will Write Once and can Run Anywhere, we have to write code only one time, and we can run on any O.S. platform.
- jQuery UI provides clean and understandable good documentation, all parts of jQuery UI is thoroughly explained.
- jQuery UI provides a Theme Roller, which can be used to configure a custom theme by playing with CSS properties and seeing their effect on the jQuery UI widgets live.
- Stable and maintenance-friendly jQuery UI has a huge community and developer supports so if there is any bug it will be patched within no time.
Difference between jQuery UI and Script.aculo.us:
|
jQuery UI |
Script.aculo.us |
|
| 1. | It is built upon the jQuery framework. | It is built upon Prototype JavaScript Framework. |
| 2. | It has good documentation and there are many tutorials over the internet. | It lacks proper documentation and tutorial on “getting started” . |
| 3. | It can be integrated with different frameworks. | It can’t be integrated with other frameworks properly except Ruby on Rails. |
| 4. | It has a Theme Roller that can be used to create custom themes. | It doesn’t provide any facility to create your own custom animation. |
| 5. | It is more regularly updated and maintained. | It lacks supports of developers and not regularly maintained. |
| 6. | It is lightweight and the code is very concise. | It is not lightweight. |
| 7. | It has a larger active community. | It is discontinued and has no active community. |
Advantages of using jQuery UI over Script.aculo.us
- jQuery UI library size is smaller than Script.aculo.us and it is faster than Script.aculo.us (prototype) as it loads only a portion of the webpage that needs to be refreshed.
- jQuery UI has more plugins available than Script.aculo.us. jQuery UI has hundreds of unofficial plug-ins available whereas Script.aculo.us (prototype) has only a few.
- jQuery UI provides jQuery.animate function by which we can do any CSS animation whereas scriptaculous.js for some pre-built animation effects only.
- jQuery UI is easier to learn because lots of tutorials are available over the internet whereas Script.aculo.us is somewhat hard to learn.
- jQuery UI is maintained regularly than Script.aculo.us (Prototype).
- jQuery UI more popular than Script.aculo.us (Prototype).
Disadvantages of using jQuery UI:
Using jQuery UI makes your code very repetitive, but it is good for a small application.
As of 2021, jQuery UI development is rather slow as compared to earlier years.