jQuery++ is a collection of extremely useful DOM helpers and special events for jQuery. It is all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, jQuery++ is jQuery’s bald-spot covering toupee.
Main Features
Get just what you need
jQuery++ has a groovy download builder that lets you select the functionality you need and it builds a custom JS file with exactly that. If you’re using Steal or AMD, you can simply load the files you need and dependencies will be loaded for you:
steal('jquery/event/drag', function(){
$('#tasks').on('.handle','draginit', function(ev, drag){ })
})Delegatable events
Using JavaScriptMVC, CanJS, Backbone, Spine or any of the other frameworks that use declarative event bindings like ".item click"? Use jQuery++ special events with these libraries like:
var Tasks = can.Control({
".handle draginit" : function(handle, ev, drag){
}
})This works with drag, drop, hover, and swipe events.
Speed up your app
Speed matters. Add fastfix to improve your app’s over-all performance by about 3-5%. Use styles to read multiple computed styles from a single element much faster than jQuery’s css. Use animate to use hardware accellerated CSS animations in supporting browsers.
Use text ranges
Range normalizes text ranges cross browser. I can’t wait to show you how easy it is to create a text editor with me.
Desktop-like layouts
The resize event makes it very easy to create desktop-like layouts where internal components respond to the dimensions of their parent component. It does this by reversing the order of the resize event. Instead of the event traveling from children to parent, it travels from parent to children.
Why we can use jQuery++
First of all, it’s easy to use at all!
jQuery++ does things the jQuery way, which makes it really easy to learn if you are already familiar with jQuery. Get functionality that was always tricky to implement from one coherent library:
- Set and animte outer and inner dimensions with dimensions
- Serialize forms into objects with formParams
- Drag & drop events - no need for jQuery UI
- Resize elements the right way
- Listen to swipe events for mobile apps
- Pause and resume events for event oriented JavaScript applications
Flexible
You don’t have to use all of jQuery++. Just chose the plugins you want using the download builder, load them with StealJS or as AMD modules. Each plugin only includes the dependencies it actually needs, so your JavaScript application will stay as small as possible.
Delegatable events also make it easy to integrate with libraries like CanJS and Backbone. No custom APIs to take care of, just the jQuery way of handling events.
Fast
Some jQuery++ plugins can help to significantly speed up your applications. Use
- styles to get computed style from an element a lot faster
- compare to quickly compare element positions
- fastfix to speed up jQuery’s event handling on modern browsers
- destroyed to avoid memory leaks and keep your references up to date when elements get removed from the DOM
Available DOM Helpers:
animate: jQuery.animate overwrites $.fn.animate to use CSS 3 animations if possible. It takes the same arguments as the original $.fn.animate and will fall back to jQuery’s JavaScript animation if a CSS animation is not possible.
compare: jQuery.compare adds $.fn.compare to compare the position of two nodes. It returns a number that represents a bitmask showing how they are positioned relative to each other.
cookie: jQuery.cookie packages Klaus Hartl’s jQuery cookie plugin for manipulating cookies
dimensions: jQuery.dimensions overwrites $.fn.innerWidth, $.fn.outerWidth, $.fn.innerHeight, $.fn.outerHeight and enables $.fn.animate to animate these values. Inner dimensions include the padding where outer dimensions also take care of borders and margins (if includeMargin is set to true).
formParams: jQuery.formParams adds $.fn.formParams which serializes a form into a JavaScript object. It creates nested objects by using bracket notation in the form element name. If convert is true, values that look like numbers or booleans will be converted and empty strings won’t be added to the object.
range: Use jQuery.Range to create, move and compare text ranges. Use $.Range.current() to get the currently selected text range. $(el).range() returns a text range on an element.
selection: jQuery.selection adds $.fn.selection to set or retrieve the currently selected text range
styles: jQuery.styles adds $.fn.styles as a fast way of getting a set of computed styles from an element. It performs much faster than retrieving them individually e.g. by using jQuery.css().
within: jQuery.within adds $.fn.within and $.fn.withinBox that return all elements having a given position or area in common.
Events
destroyed: The destroyed event is triggered by jQuery.event.destroyed when the element is removed from the DOM using one of the jQuery manipulation methods.
drag: jQuery.event.drag adds delegatable drag events to jQuery:
- dragdown - the mouse cursor is pressed down
- draginit - the drag motion is started
- dragmove - the drag is moved
- dragend - the drag has ended
- dragover - the drag is over a drop point
- dragout - the drag moved out of a drop point
drop: jQuery.event.drop complements jQuery.event.drag with delegatable drop events:
- dropinit - the drag motion is started, drop positions are calculated
- dropover - a drag moves over a drop element, called once as the drop is dragged over the element
- dropout - a drag moves out of the drop element
- dropmove - a drag is moved over a drop element, called repeatedly as the element is moved
- dropon - a drag is released over a drop element
- dropend - the drag motion has completed
fastfix: jQuery.event.fastfix speeds up jQuery.event.fix by using ECMAScript 5 getters. jQuery.event.fix is used to normalize a DOM event before it gets passed as a jQuery.Event instance to event handlers. This is usually done by copying the properties from the DOM event. jQuery.event.fastfix uses ES 5 getters to access these properties only when they are needed.
hover: jQuery.event.hover provides the following hover events:
- hoverinit - called on mouseenter
- hoverenter - an element is being hovered
- hovermove - the mouse moves on an element that has been hovered
- hoverleave - the mouse leaves the hovered element
key: jQuery.event.key adds a .keyName() method to the event object that returns a string representation of the current key
pause: jQuery.event.pause adds a default event handler, event.pause() and event.resume() for pausing and resuming event propagation and $.fn.triggerAsync for triggering an event asynchronously and executing a callback when propagation is finished.
This is very useful for creating event oriented jQuery widgets that provide default behavior for certain events. A widget user can intercept any of these events, pause it and perform other actions before resuming the default action or prevent it entirely.
resize: jQuery.event.resize allows you to listen to resize events on arbitrary elements. Unlike other events that bubble from the target element to the document the resize event will propagate from the outside-in. This means that outside elements will always resize first. Trigger the resize event whenever the dimensions of an element change and inside elements should adjust as well.
swipe: jQuery.event.swipe adds support for swipe motions providing the delegatable swipeleft, swiperight, swipedown, swipeup and swipe events
