Keeping up with the new jQuery plugin releases and developments sometimes feels like a full-time job! Every other day something new and better crops up that catches the eye and you think yourself “Wow, that looks good, I could use that!“.
For this post I have collected 25 of the best newly (or, pretty close to new) released jQuery plugins, and every time I do a post like this the plugins seem to get better and better and push development boundaries further and further away.
I hope you find these plugins useful.
Meerkat
Meerkat, depending on the options you have set, will slide or fade in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally. You have a choice of providing a close option which will simply close Meerkat until the page has been reloaded, or a dontShow option, which will close Meerkat until the browser session has ended, or for a set amount of days, depending on the options you have defined.
Meerkat Demo »Docs & Downloads »
Brosho 'Design in the Browser' jQuery Plugin
With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.
You will be able to stop switching between your Editor and the Browser and changes will occur immediately without reloading the page. Once you are finished designing your mockup you can generate the CSS code, copy and paste it to your stylesheet and tweak it to your likings.
Brosho Demo »Docs & Downloads »
tinyTips 1.0
TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page.
tinyTips Demo »Docs & Downloads »
TipTip jQuery Plugin
TipTip is a very lightweight (only 3.5kb minified) and intelligent custom tooltip jQuery plugin, it uses no images and is completely customizable via CSS.
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip Demo »Docs & Downloads »
TipTip Overview Video
jQuery-Notes 1.0.2
jQuery-Notes is an easy to use jQuery plugin that allows you to add notes any images on your website.
jQuery-Notes Demo »Docs & Downloads »
jQuery Roundabout
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.
In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.
jQuery Roundabout Demo »Docs & Downloads »
jQuery Masonry
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
jQuery Masonry Demo »Docs & Downloads »
Google Buzz Widget – A jQuery Plugin
This is a jQuery widget for the brand new social network -Google Buzz- that you can embed anywhere on your webpage to integrate your Buzz stream into your page.
Google Buzz Widget Demo »Docs & Downloads »
gMap – Google Maps Plugin For jQuery
gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.
When I say that gMap is very easy to use and install I am not exagerrating. Simply follow the simple steps outlined on gMaps homepage and you are good to go.
jQuery Quicksand
Quicksand is a very functional jQuery plugin for reordering and/or filtering items with a sleek and smooth shuffling animation.
This awesome plugin simply replaces a collection of items with another and also comes with a fair few options – like setting the duration or the easing type of the animation (optionally, Easing plugin can be used for more easing types).
jQuery Quicksand Demo »Docs & Downloads »
jQuery PhotoShoot Plugin 1.0
The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder.
Hover the mouse over the image,click on the section of the image you like and hey presto your cropped PhotShoot image will appear. excellent plugin.
Photoshoot Effect Demo »Docs & Downloads »
jQuery Photo Tagger Plugin For Flickr-Style Photo Tagging
jQuery Photo Tagger Demo »Docs & Downloads »
jqFancyTransitions: jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
You have three predifined effects that you can use: Wave, Curtain and Zipper. And of course, you can made custom effects with a set of options that can set speed, number of strips, direction, type of effect, etc.
The effects are endless.
jqFancyTransitions Demo »Docs & Downloads »
YoxView – jQuer Image Viewer Plugin
YoxView is a feature rich free image viewer for websites: Images are scaled to fit inside the browser's window, the images can be pre-cached in the background, slideshow-enabled – images may be played automatically, keyboard navigation enabled, it is fully configurable and its two main features are flexibility and ease of use
YoxView Demo »Docs & Downloads »
Uniform – Sexy forms with jQuery
Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?
If so, Uniform is your new best friend.
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Uniform Demo »Docs & Downloads »
Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.
Don't like the default styling? Change it! Need another mark up? Edit it! No validation fits your needs? Write your own! Make your own ketchup with ease.
jQuery Form Wizard Plugin
The jQuery Form Wizard Plugin will convert your regular forms into step-by-step form wizard without having to reload the page when moving from one step to another. The plugin is unobtrusive and gives you the ability to set up flow of the different steps, by creating specific routes based on user input.
Form Wizard Demo »Docs & Downloads »
jQuery Imageless Buttons a la Google
This jQuery plugin recreates Google's imageless buttons and prove that it doesn't take a whole team of engineers and an endless cycle of code revision and quality control (Googles own words) to pull this off.
The buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.
Imageless Buttons a la Google Demo »Docs & Downloads »
jQuery Slider plugin (Safari style)
jQuery Slider Demo »Docs & Downloads »
jqIsoText: jQuery Text Effect Plugin
jqIsoText is plugin for displaying your text with pseudo-isometric effect that will work without any additional CSS, but it can be easily custom styled.
This plugin can be implemented for text nods only.
jqIsoText Demo »Docs & Downloads »
jTextTranslate: A jQuery Translation Plugin
The plugin works like this: At the beginning of every article you click on a small icon, a ligtbox will appear and asks you to select your language, it will then automatically translate the text. It really does work that easily.
Imagine, how users that don’t speak English as their first language could benefit from an integrated functionality across all websites.
jTextTranslate Demo »Docs & Downloads »
The hoverFlow Plugin – A Solution to Animation Queue Buildup in jQuery
Why do hover animations continue after I stop hovering? If you have asked yourself this question before then you really nedd the hoverFlow plugin!
A queued animation will only run if it corresponds with the current mouse position at "runtime". That is, a mouseover animation will only run if the mouse is currently over the element, and a mouseout animation will only run if the mouse is currently not over the element. Otherwise, the animation queue is empied.
hoverFlow Demo »Docs & Downloads »
xBreadcrumbs (Extended Breadcrumbs) jQuery Plugin
xBreadcrumbs (Extended Breadcrumbs) is a jQuery plug-in to create categorized breadcrumbs for your site. This may be useful if your website has a deep structure and you want allow your visitors to quickly navigate through one section of the site to another. xBreadcrumbs works with unordered lists (UL/LI) which would make your breadcrumbs fully optimized for search engines. An SEO freindly breadcrumb has many benefits.
xBreadcrumbs Demo »Docs & Downloads »
Get TopUp!
TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.
The installation of TopUp consists of including only one file (no images or stylesheets!), the look-and-feel is Apple-like, the animations and transitions look fancy, it is so easy to specify options and last but not least: you can stay updated with the latest version without changing any code.
TopUp! Demo »Docs & Downloads »
FireQuery – Firebug extension for jQuery development
Wheras this Firebug extension may not be very fresh, it is fresh to me, and certainly worth sharing.
jQuery expressions are intelligently presented in Firebug Console and the DOM inspecto, elements in jQuery collections are highlighted on hover, jQuerify: enables you to inject jQuery into any web page and jQuery Lint enables you to inject jQuery Lint into page being loaded automatically (great for ad-hoc code validation).
have a look at the screencast below for an overview of all its features:
0 yorum:
Yorum Gönder