21 Must-Have Scripts For Your Favorite Javascript Library (jQuery, MooTools, Prototype)
Comments(34)
Del.icio.us
Digg
RedditIn attempting to spruce up my knowledge of Javascript, I’ve been trolling around the net collecting scripts and tutorials for various Javascript libraries, mainly jQuery, MooTools, and Prototype. Of the three, MooTools seems to supply me with the most JS lovin’ – it’s easy to learn, holds super powerful Ajax abilities, and is customizable to the core.
After sorting through tons of scripts, I thought I’d share the best ones with you.
Each script is categorized based upon the Javascript library they use. A few links aren’t actually scripts, but rather reference sheets or links to other resource websites.
jQuery (jq)
“jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.” – Wikipedia, 01/16/08
Reference Sheet (jq)
Each one of these reference sheets (cheat sheets) are crammed with functions and usage for jQuery. (They are slightly outdated. If you know of any jQuery reference sheets recently updated, please let me know.)
=-=-=-=-=-=
Reference Sheets (PDF): Page 1 – Page 2
Multiple File Uploads (jq)
The point of this AJAX-enabled script is to give the user a visual sandbox to add/delete uploads, all without ever reloading the page. The examples and documentation are topnotch.
=-=-=-=-=-=
Fyneworks – Multiple File Upload
Table Sorting (jq)
Sort table data by their parent category with Javascript – no page reloading, compact code, lots-o-fun.
=-=-=-=-=-=
Polyester – Tablesorter
A List of 240 Plugins (jq)
Rather then regurgitating what’s already on the net, here’s a site that lists over 240 jQuery plugins and their respective links. It’s freaking huge.
=-=-=-=-=-=
Sastgroup – 240 Plugins For jQuery
MooTools (mt)
“Mootools is a compact, modular, object-oriented JavaScript web application framework, intended to make the process of writing extensible and cross-browser compatible code more efficient.” – Wikipedia, 01/17/08
Reference Sheet (mt)
Being that MooTools is so simple to use, you may not even need a cheat sheet. But just in case, Snook has put together a colorful dab of MooTools knowledge for your enjoyment.
=-=-=-=-=-=
Snook – Mootools r83 Cheatsheet
mooRainbow (mt)
MooRainbow has to be one the best looking color pickers I’ve seen for the web that isn’t Flash. It’s almost an exact clone of the color picker used in Photoshop, and again, it’s for the web. Sweet stuff people, sweet stuff.
=-=-=-=-=-=
Woolly Sheep – mooRainbow
Mediabox (mt)
Think of a lightbox, only comprising of streaming online media (like YouTube or Quicktime movies) instead of images. This is what we call a ‘mediabox’, and I love it.
=-=-=-=-=-=
Ianian7 – Mediabox
Slideshow (mt)
Taken from Electric Prism, “Slideshow is a javascript class to stream and animate the presentation of images on your website.”
The presentation is similar to the default pan/zoom of Apple’s screensaver.
=-=-=-=-=-=
Electric Prism – Slideshow
Charts (mt)
Easily create stylish charts and graphs of any combination of data, all with Javascript simplicity. If you have any data that needs presenting on your website, this script is well worth a download.
=-=-=-=-=-=
Copix – Charts & Graphs
Calendar / DatePicker (mt)
Made by the same badasses that created Mediabox (above), this date picker is super-stylish and easy to integrate into your website. Never again should your web user have to manually insert a date.
=-=-=-=-=-=
Electric Prism – DatePicker
FancyUpload (mt)
FancyUpload is a stylish presentation of uploads and ability to add/remove your upload queue with a mouse click. Well worth a look for anyone presenting upload options on their site.
=-=-=-=-=-=
Digitarald – FancyUpload
Library (mt)
Keeping with what the header says, this is the motherload of MooTools information – a library for a library, if you will. It’s a complete reservoir of scripts, tutorials, and basic information relating to MooTools.
=-=-=-=-=-=
CNET – MooTools Library
Mocha UI (mt)
Picture an entire user interface built entirely in Javascript. That’s Mocha UI – expandable, collapse, and minimize windows all while maintaing the feeling of being in a virtual operating system. It’s incredibly smooth, cross-browser compatible, and unbelievably small in size.
=-=-=-=-=-=
Greg Houston – Mocha
MooTable (mt)
Dress a simple table in a MooTable script and you instantly have the ability to sort any column with the click of the mouse. Easy to setup and extremely lightweight.
=-=-=-=-=-=
Joomlicious – Mootable
Reflection JS (mt)
Reflection JS beautifully adds a perfect reflection to any image without the need for manual labor. The background opacity, height, and fade can be controlled as shown on the Reflections website.
=-=-=-=-=-=
Digitalia – Reflection JS
Slimbox (mt)
It’s identical to Lightbox v2.0, only made for MooTools and a mere 7kb in size. It’s a must have for MooTool users needing the lightbox effect.
=-=-=-=-=-=
Digitalia – Slimbox
MooFlow (mt)
It’s coverflow for the web, built on MooTools. The application is a little shaky, but will no doubt improve with time.
=-=-=-=-=-=
Outcut – MooFlow
Prototype (p)
“… A JavaScript framework created by Sam Stephenson that provides an Ajax framework and other utilities.” – Wikipedia, 01/23/08
Reference Sheet (p)
Made by the same killer dude that created the MooTools cheat sheet, Snook delivers some Prototype help in the same yummy, cheat sheet fashion.
=-=-=-=-=-=
Snook – Prototype Cheat Sheet
Script.aculo.us (p)
An obvious must-have for Prototype users. Script.aculo.us provides an amazing library of visual styles (including the ability to drag-and-drop) and works flawlessly on the Prototype library.
=-=-=-=-=-=
Script.aculo.us
Really Easy Field Validation (p)
Exactly what the header says – convert any form into an instantly-validating machine.
=-=-=-=-=-=
Tetlaw – Really Easy Field Validation
jsProgressBarHandler (p)
Add a beautiful progress bar to your application and start singing songs of joy. This is by far the easiest (and best looking) progress bar script you’ll find on the internet.
=-=-=-=-=-=
Bram – jsProgressBarHandler
EditInPlace (p)
This is an excellent script in that it’s simple, yet extremely helpful. The techniques of EditInPlace are used in applications like Basecamp and Facebook, and probably everywhere else on the internet.
=-=-=-=-=-=
EditInPlace
Prototype Window (p)
Prototype Windows is an extremely advanced version of Lightbox. Create popup windows on-the-fly with ajax calls, or via common href application. Anything’s possible.
=-=-=-=-=-=
Xilinus – Window/
This is a cool comp! Some of these plugins i didn’t know, but I miss some others…
Someone just told me about this website at the prototype IRC channel that has a lot of cool plugins for prototype: http://scripteka.com/
looks great. THanks for the list. I stumbled here. and this is a huge resource.
Have you guys seen the drastic data site. Its scripts are also built on moo tools and they provide the functionality to sort and edit live data in a table, they also provide the ability to create tag clouds and display data from mysql on a goggle map.
drasticdata.nl
Iv’e used these scripts and they are good.
[...] 21 Must-Have Scripts For Your Favorite Javascript Library (jQuery, MooTools, Prototype) (tags: jquery) [...]
at the and of your research wich one of these scripts better than others
i see protype is most widely used but jquery is lighter than prototype scirptacilious…
which one do you prefer and why?
http://www.ajaxrain.com/ <—- 1001 quality scripts using upper libraries, prototype, jquery and mootools
Great list, thanks for sharing.
Some other scripts for mootools can be found at esteak.net
отличная подборка скриптов ,спасибо!
amazing collection, thank you. I have already become a fan of scritaculous and mootools calendar./
Srivyal Vuyyuri
http://www.sphoorti.org
Great library but extjs (www.extjs.com) surpasses each of these worthy collection
awesome list
thumbs up
Hi, I love this compilation, i didnt know most of the scripts, and i am already testing most of them.
Thank you very much!!!
Awesome. Thanks.
21 Must-Have Scripts For Your Favorite Javascript Library (jQuery, MooTools, Prototype) – Labs…
In attempting to spruce up my knowledge of Javascript, I’ve been trolling around the net collecting scripts and tutorials for various Javascript libraries, mainly jQuery, MooTools, and Prototype. Of the three, MooTools seems to supply me with the mos…
21 Must-Have Scripts For Your Favorite Javascript Library (jQuery, MooTools, Prototype) – L…
scripts and tutorials for various Javascript libraries, mainly jQuery, MooTools, and Prototype…
Thanks! I’ve been using prototype with such happyness! Thank You for your collection!
Amazing list. Very usefull. Thanks,
BTW: Can you tell me which font is used in headers?
Thank You ..!
Great compilation, thanks :)
An excellent list of web design tools. Very useful.
[...] 21 Must-Have Javascript scripts for the most popular libraries out there – MooTools, jQuery & Prototype. [...]
Wow, the MOOCHA UI is simply mind-blowing. So elegant, yet so simple and light. I am planning to make my next website project using Moocha only. It simply rocks !! :-)
[...] 21 Must-Have Scripts For Your Favorite Javascript Library (jQuery, MooTools, Prototype) – Labs (tags: ajax javascript) [...]
[...] 21 Must-Have Scripts For Your Favorite Javascript Library (jQuery, MooTools, Prototype) – Labs (tags: javascript code samples links lists resources ** jquery mootools prototype library) Possibly related posts: (automatically generated)CNET.com: Speed up your bootup time – Tools for faster boot timesCNET.com: Interactive game merges tech with urban adventure [...]
last night i found a lightbox clone as TALCIBox.. that one really good.. just check it at http://www.cdsnettr.com/post/2008/07/talcibox.aspx
[...] 21 Must-Have Scripts for Your Favorite Javascript Library (JQuery, MooTools, Prototype) [...]
here my list of best mootools scripts:
http://mootools.startgigant.nl/
hope it will be usefull
[...] 21 Must-Have Scripts For Your Favorite Javascript Library (jQuery, MooTools, Prototype) – Labs (tags: webdev webdesign web2.0 web tutorials tutorial tools scripts resources) [...]
The MooTools r83 cheatsheet is VERY OLD. Please replace it with a link to the documentation for the current version :)
[...] Must-Have Scripts For Your Favorite Javascript Library (jQuery, MooTools, [...]
very greate
great efforts incredible greedy collection
What about iMoogle, a free mootools class to obtain the effect of the igoogle home page? Here it is: http://www.cosmobile.net/#ricerca_dettaglio_id_23