Before a week one my friend had requested me to suggest any jQuery plug-in that is carousel with accordion effect inside. I tried to find one suitable plugin – but couldn’t make it. That made to write my own custom plugin that consist both carousel and accordion effect. Another one requirement was to flyout the most closed sibling elements to outside and hide rest of all when accordion expands.
Best jQuery Plugins Plugins & Tutorials with Demo
Flex : A fluid asymmetrical jQuery Animated Grid plugin
A fluid asymmetrical animated grid plugin for jQuery.Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead me to a few plugins that were similar, but not the same. Saw one person say it was “quite impossible”, thought it would be a fun challenge.
tabSwitch : jQuery tab/slider plugin
tabSwitch is a tab/slider plugin for jQuery. You could make a tab box system with the least of code and still fully customizable. Currently, you could choose from 7 different effects with 2 view styles. You could also hot swap the effects around in runtime.
- There is no limit what kind of HTML tag you use.
- You could move to next, prev tab or jump to a specific tab.
- All the controls could be anywhere in the website, on top of a tab, inside a tab…
- Multi-level tab system.
- You could change the style of the viewport, you could add a class for every single tab…
WideText jQuery Plugin
I was searching around the internet trying to find a responsive text solution that was lightweight and easy to use. The few that I stumbled upon didn’t work exactly how I wanted, or they had too many bells and whistles.
As always, I decided to mess around with each one to figure out the best approach I could take to simplify everything and get it working for me. In the end, I managed to put together a tight little jQuery plugin that gets the job done and nothing more.
optionTree : jQuery plugin to dynamically create Select Elements
jQuery plugin to dynamically create select elements with hierarchical options.This jquery plugin converts passed JSON option tree into dynamically created <select>elements allowing you to choose one nested option from the tree.It should be attached to a (most likely hidden) <input> element. It requires an option tree object. Object property names become labels of created select elements, each non-leaf node in the tree contains other nodes. Leaf nodes contain one value – it will be inserted into attached <input> element when chosen.
The plugin also supports loading additional levels via AJAX calls and preselecting given items at load.
File Style Plugin for jQuery
jQuery plugin for styling file input elements. Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.
Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.
customSelect : jQuery UI widget to pretty up Select Elements
A simple jQuery UI widget to pretty up <select> elements and input custom ranges. It’s fully unit tested too, you can run the tests if you like.It works by setting the values back in your original select, so you can call the standard jQuery val methods to read the value, bind to the change event, etc right on the native element.
