leanModal is a lightweight jQuery plugin for displaying modal boxes with minimum effort.
The plugin doesn’t use any images and a very good solution for for displaying anything except image galleries as there is no built-in support for that. But that’s ok considering it only weights 780 bytes (when minified).
The width and height of the modal box is flexible and adjusts itself according to the content.
Multiple instances can be used on the same page and there are almost no settings or complicated usage instructions which is perfect for most cases.
Kaiten is an impressive jQuery plugin for creating a flexible, simplistic and powerful browsing experience.
It helps quickly-building a column-based interface where each column can be a part of a sequence (like a breadcrumb navigation) and resized by the end-user.
The interface auto-arranges itself according to the browser-width by changing the number of the columns displayed. Simply, it will perform nicely on mobile and tablet browsers.
Kaiten can be extended very easily with its API. The plugin is also well-documented and comes with a demo that shows its features.
The plugin is included in a new web app platform named Officity and in alpha stage (yet very promising).
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.officity.com/kaiten/
Demo: http://www.kaitenbrowser.com/
Download: http://www.officity.com/kaiten/download/
Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips.
Compared to other plugins, it comes with minimum default styles or animations but gives you the complete control over them.
It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented.
There are also few settings like “the ability to aligning the tooltip according to the cursor or the element” and “its distance from them”.
Tooltipsy is very well-documented and a set of samples show the flexibility offered.
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://tooltipsy.com/
Demo: http://tooltipsy.com/samples.html
Download: https://github.com/briancray/tooltipsy/archives/master
jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system.
It is possible to configure every detail from” the number of the stars” to “if the stars can represent decimals or not”.
There is also an option to display small or big stars and images can be changed with any other file easily.
Although the plugin can be used with any scripting language, a PHP file that handles the requests is already included in the download package.
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.myjqueryplugins.com/jRating
Demo: http://www.myjqueryplugins.com/jRating/demo
ProcessWire is an open source CMS application that is built with PHP and simplicity in mind.
The application has a very low learning curve as there is no complexity and it is pretty developer/designer friendly considering it’s built to adapt to your way of doing things.
With the help of a jQuery-inspired API (a big “plus” for jQuery fans), it gives you the tools to reach data, but you make the markup.
Anything can be built with ProcessWire as all page fields in it are custom fields. It’s easy to edit, add, sort or remove fields from pages (via templates) as you see fit.
And, for maximum flexibility, fields can be as simple as containing raw text or numbers, or more complex like rich text editors, page-to-page relations and fields that hold files or images.
The application is friendly for end-users too as no details other than the “things-to-done” are displayed.
It has a modular plugin architecture for extending functionality and a must-check for any designer/developer (specially jQuery users).
Requirements: PHP 5.2.4+, MySQL 5.0.15+
Website: http://www.processwire.com/
Demo: http://processwire.com/demo/
Download: https://github.com/ryancramerdesign/ProcessWire
The-M-Project is an exciting HTML5 JavaScript framework for building cross-browser mobile web applications (iOS, Android, Palm webOS, BlackBerry).
It makes use of jQuery on the JavaScript part and contains all ui + core files with features like offline support, internationalization and more.
The-M-Project is not alone, it requires nodeJS and comes with a build tool called: Espresso! which makes it easy to structure your code, build and run it on a built-in server.
Although the framework is in alpha stage, it is already well-documented and comes with multiple downloadable examples.
Requirements: Git & nodeJS
Compatibility: All Major Mobile Browsers
Website: http://the-m-project.net/
Demo: http://the-m-project.net/showcase.html
jQuery Bubble Popup is a plugin for the popular JS framework that helps creating chic tooltips which can be controlled easily.
The tooltips are shown/hidden with fading animations and any HTML content can be displayed inside them.
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.vegabit.com/jquery_bubble_popup_v2/
Demo: http://www.vegabit.com/Examples/different-elements.html
Download: http://plugins.jquery.com/project/jqBubblePopup
They can be attached to any side of an element and it is possible to get the status of a tooltip (on/off, creation, last-modified or last-display date & time) to act accordingly.
A tooltip’s design can easily be customized with the help of a template system and the plugin is very well-documented.
rotate3Di is a jQuery plugin that makes it possible to perform an isometric 3D flip or 3D rotation of any HTML content.
The plugin uses CSS3 transforms and also helps creating any custom 3D effects.
There are various options offered like the position of the element in degrees, duration/direction of the animation and callbacks on every level.
Requirements: jQuery
Compatibility: All Modern Browsers
Website: http://www.zachstronaut.com/projects/rotate3di/
Download: https://github.com/zachstronaut/rotate3Di
Addy Osmani shows us how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.
You’ll also learn today how you can successfully use layering in your designs to give your gallery that extra bit of detail that can make it stand out from the others.
Requirements: jQuery Framework & CSS3
Demo: http://www.addyosmani.com/resources/shinetime/
License: License Free
We all know that forms look different in every operating system, browser and even some browser versions.
Formalize is a CSS framework that aims to bring a solution to this issue by providing more consistent styling and functionality for them.
It doesn’t make them look all the same, rather, keeps some characteristic differences but focuses on finding the medium by picking the best parts from each.
These include a slight inset on items, similar looking buttons (including thebutton tag), light blue :focus border and more.
Also, the HTML5 placeholder and autofocus attributes work for browsers that doesn’t support them with the help of jQuery.
Website: http://sonspring.com/journal/formalize-css
Demo: http://host.sonspring.com/formalize/
Download: http://github.com/nathansmith/formalize/
