background preloader

Jquery plugins

Facebook Twitter

Essential jQuery Plugin Patterns - Smashing Coding. Advertisement I occasionally write about implementing design patterns1 in JavaScript.

Essential jQuery Plugin Patterns - Smashing Coding

They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide2 offers a great starting point for getting into writing plugins and widgets, but let’s take it further. Plugin development has evolved over the past few years. Some developers may wish to use the jQuery UI widget factory3; it’s great for complex, flexible UI components. I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. Let’s assume that you’ve tried your hand at writing your own jQuery plugins at some point and you’re comfortable putting together something that works.

Patterns. jQuery.ScrollTo. Notice I've pretty much stopped updating this blog, but the plugin development is still on-going.


You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: jQuery.ScrollTo. jQuery.ScrollTo by Ariel Flesler Links Table of contents (try these) Ways to specify the target Click an option, to see it in action Options The examples shown here, are summarized for brevity, check the source for real code Note that when 'queue' is true, choosing 'axis' as 'xy' or 'yx' matters Don't use a hash for the target to scroll only one axis, use the option 'axis' instead.


Sticky - An unbelievably simple notification system for jQuery. July 19, 2011 Let's face it, your users need sweet little notifications to keep them all warm and fuzzy inside.

Sticky - An unbelievably simple notification system for jQuery

Sticky allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders. Demo. jQuery PointPoint Plugin. FullCalendar - Full-sized Calendar jQuery Plugin. jVectorMap. MobilyMap. jQuery.twinkle · Awesome jQuery Plugins And Techniques To Create Visually Excellent Websites. jQuery.fracs · To use the core lib just include jquery.fracs-0.12.0.js.

jQuery.fracs ·

The outline feature can be found in jquery.outline-0.12.0.js and depends on the core lib (you'll need to include both files). Fractions To retrieve the fractions of an element use: var fracs = $(selector).fracs(); this will return an object of type Fractions. Or bind a callback function: function callback(fracs: Fractions, previousFracs: Fractions) { ... // context variable *this* will be the corresponding HTMLElement ...}; $(selector).fracs(callback); The callback function will be called whenever fracs and previousFracs are unequal.

$(selector).fracs('check'); Outline Add a canvas to your document (use a fixed position to keep it in viewport) Image Desaturate jQuery plugin. Originally written for, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning.

A grumble can be rotated around a given element at any angle, all 360 degrees. Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better. Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better

Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are fewer than (n) options.

Default Text Support. Jcrop Image Cropping Demos. Aspect ratio with preview pane.

Jcrop Image Cropping Demos

The most visual demo, the preview pane is accomplished entirely outside of Jcrop with a simple jQuery-flavored callback. This type of interface could be useful for creating a thumbnail or avatar. The onChange event handler is used to update the view in the preview pane. $.geo docs. $.geo is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term "open-source" to explictly state that Google, Bing, MapQuest, Yahoo! & ESRI are generally free but not open. Please read the following sections for more information and examples, and thank you for considering us! Also, that the documentation comes first with this project and can be lightyears ahead of the code. Look to the examples section to determine which parts of the design have been implemented. docs.