jQuery UI: Interactions and Widgets

Posted on by
Meet the jQuery UI team at jQueryCamp Boston!
We’re having a free one day conference this October and most of the jQuery, and jQuery UI, teams will be there. Come along, ask questions, and meet the people who build the library that you love!

User Interface - Green

Today we’re very pleased to announce a brand new library: jQuery UI. jQuery UI is a fully themed interaction and widget library built on top of jQuery.

You’ll be able to find everything that you need to know about jQuery UI on it’s site:
http://ui.jquery.com/

jQuery UI signals the start of a whole new branch of the jQuery project which will focus on developing high-quality, reusable, components that you’ll be able to drop in your applications. Frequently, these components are coming directly to you from traditional jQuery plugins, but with strict coding, documentation, themeing, and demo standards. We hope you’ll enjoy this new level of quality as much as we do.

We’re launching with one complete theme: Flora (designed by Tom) and two partially-complete themes: Light and Dark (by Sean). Within the next week we’re going to be announcing the details of a new theming competition, along with everything that you need to completely build your own jQuery UI theme.

Note: jQuery UI requires that you use, at least, jQuery 1.2.1 or newer.

Please be kind, there’s still going to be a mess of rough edges, as is to be expected with a brand new project. Please submit bugs to the bug tracker under the “UI” component and bring them up for discussion on the jQuery UI Mailing List. We appreciate your help.

Without further ado, here’s jQuery UI!

Demo App: Advanced Image Gallery

(Currently has issues in IE and Safari – we’re working on some fixes which should be up later today.)

Demo App: Bar Chart Navigation

(Currently only works in browsers that have Canvas support: Firefox, Safari, and Opera.)

Features: Mouse Interaction

Draggables (Docs)

Droppables (Docs)

Sortables (Docs)

Selectables (Docs)

Resizables (Docs)

Features: Widgets

Accordion (Docs)

Calendar (Docs)

Dialog (Docs)

Slider (Docs)

Tablesorter (Docs)

Tabs (Docs)

Features: Effects

Magnifier (Docs)

Shadow (Docs)

Contributors

This is the result of many months of work by over a dozen people – many of whom were first time contributors to jQuery.

For now, here’s a rough list of everyone who helped, and what they helped with. (Please let me know if I forgot anyone!)

  • Paul B (Draggables, Droppables, Sortables, Resizables, Slider, Shadow, Magnifier, Gallery App)
  • John (Documentation, Theming, Demos, UI Site, Cat Herding)
  • Richard (Tree, Selectables, Sortables, Dialog, many bug fixes)
  • Tom (Flora theme, UI Site, and UI logo)
  • Sean (Theming, Dark and Light themes, Shadow, Forms)
  • Klaus (Tabs)
  • Joern (Accordion)
  • Christian (Tablesorter)
  • Adel (Downloader, Client-Side)
  • Paul H (Downloader, Server-Side)
  • Marc (Calendar)

With additional help from: Tane, Micheil, Gilles, Dmitri, and Yehuda. Much of their work will be seen in the next release of jQuery UI (including menus, toolbars, uploaders, splitters, and rich text editors).

I’d like to do a more-detailed write up of what everyone put into this project to thank everyone individually, as everyone did a really fantastic job of pulling together and making this happen. Paul, Tom, Richard, and Sean, especially – you guys did a superb job!

Once again, I hope everyone enjoys this new work – please be kind, it’s still got some very rough edges, so to speak. If you spot any bugs, please post them to the bug tracker under the “UI” component.

As always, feedback is appreciated! If you’d like to let us know what you think, please post to the jQuery UI Mailing List, or hop on irc.freenode.net #jquery-ui, as those are the best place to be able to find us.

Enjoy!

If you like what you see, feel free to give it a digg.

jQuery 1.2.1: Quick Fixes for 1.2

Posted on by

jQuery 1.2.1 is a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery 1.2.1:

If you wish to checkout the full release from the Subversion repository, you can do so by following the following instructions and checking out the source from the following location:

 svn co http://jqueryjs.googlecode.com/svn/tags/1.2.1

Important Changes

Relative Animations

There was a serious error in the API for the new relative animations that caused a conflict with existing animation styles. To resolve this, in order to do a relative animation, you must now use the following syntax:

 $(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

With += meaning “Add to the current position” and -= meaning “Take away from the current position”.

.eq()

Due to some very-persuasive arguments, and a great deal of reconsideration, .eq() has been brought back. A great number of plugins rely on this single method – and the alternative provided by .slice() simply wasn’t as elegant a solution as what was originally provided.

jQuery 1.2.1 Released

Posted on by

This is a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery Minified (14kb with gzipping)
jQuery Packed (26kb)
Regular (77kb)

Important Changes

Relative Animations

There was a serious error in the API for the new relative animations that caused a conflict with existing animation styles. To resolve this, in order to do a relative animation, you must now use the following syntax:
$(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

With += meaning “Add to the current position” and -= meaning “Take away from the current position”.

.eq()

Due to some very-persuasive arguments, and a great deal of reconsideration, .eq() has been brought back. A great number of plugins rely on this single method – and the alternative provided by .slice() simply wasn’t as elegant a solution as what was originally provided.

jQuery 1.2: jQuery.extend(“Awesome”)

Posted on by
Attend jQueryCamp Boston!
We’re having a free one day conference this October and most of the jQuery team will be there. Come along, ask questions, and meet the people who build the library that you love!

This is a massive new release of jQuery that’s been a long time in the making – and it’s ready for your consumption!

We’ve put the full jQuery 1.2 release notes on a page of it’s own, since there’s so much to dig through. REMEMBER, features were removed in 1.2, so please be sure to read the notes on how to upgrade before doing so.

As always, there’s going to be bugs, so please submit them to the bug tracker and we’ll try to get them sorted out, right away. You can probably expect a minor bug fix release within the week to take care of any pressing issues.

jQuery 1.2 (Full Release Notes)

Download

jQuery 1.2: (How To Upgrade)

Plugins:

New Features

  • Selectors
    •  :has(selector)
    •  :header
    •  :animated
    • XPath Selector Plugin
  • Attributes
    • .val() Overhaul
  • Traversing
    • .map()
    • .prevAll() / .nextAll()
    • .slice()
    • .hasClass()
    • .andSelf()
    • .contents()
  • Manipulation
    • .wrapInner() / .wrapAll()
    • .replaceWith() / .replaceAll()
    • Event Cloning
  • CSS
    • .offset()
    • .height() / .width() for document and window
  • Ajax
    • Partial .load()
    • Cross-Domain getScript
    • JSONP
    • .serialize() Overhaul
    • Disable Caching
  • Effects
    • .stop()
    • %/em Animations
    • Color Animations
    • Relative Animations
    • Queue Control
    •  :animated
    • step: Function
  • Events
    • Namespaced Events
    • .triggerHandler()
  • Internals
    • Documentation Move
    • Expando Management


Sunday, Sunday, Sunday!

This Sunday, September 16th, the brand new jQuery UI is coming to your town. Draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordions, selectables, trees, and modals. All completely documented, demoed, themed, and 100% Free Open Source Software.

To whet your appetite, here’s quick peak at what you can look forward to:

Sexy jQuery UI

Feel free to Digg this post.

jQuery 1.2 Released

Posted on by

Downloading

jQuery 1.2:
jQuery Minified (14kb with gzipping)
jQuery Packed (26kb)
jQuery Regular (77kb)

New Features

Partial .load()

Partial .load() allows you to load chunks of HTML documents into your page, filtered by a jQuery selector. This works just like a normal Ajax .load(), but you just specify a selector immediately following the URL that you’re retrieving.

Cross-Domain $.getScript

You can now use getScript to dynamically load, and execute, remote scripts. This could be used to load in jQuery plugins or other code modules.

Cross-Domain $.getJSON (using JSONP)

JSONP is a technique that allows you to transfer JSON data across multiple domains.

jQuery now supports JSONP natively – if you attempt to load JSON (via $.getJSON or $.ajax) from a remote URL then an extra callback will be provided for the server to interpret. Additionally, if the server requires a special field for specifying your own callback name you can provide it by having a “=?” in your query string.

Serialization Overhaul

The .serialize() method has seen a significant overhaul, porting the functionality provided by the jQuery Forms plugin back into the jQuery core. This will mean that the serialization of form data should now closely represent what is normally sent by the browser, to the server.

Additionally, a new .serializeArray() method has been introduced which serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with. This can be especially useful when working with large forms that you wish to process.

Disable Caching

In an $.ajax call you can now prevent requests from being cached by the browser by providing an extra cache: false flag. This will ensure that any GET requests that you might be performing will absolutely be retrieving the latest version of the page.
cache: false always sends a new request to server.

« Back to the full [[Release:jQuery 1.2|jQuery 1.2 Release Notes]].

.val() Overhaul

The simple .val() method has seen some much-needed love, making it much more useful. You can now set the checked state of groups of radios buttons and checkboxes along with setting the selected state of select options. You can achieve this by passing in an array of values, or names, of the items that you’d like to select/check. (Fails in Firefox2, radio buttons fail in IE7) It’s now possible to call .val() on select elements, to get their values.

.offset()

Brought over from the [http://jquery.com/plugins/project/dimensions Dimensions plugin], the [[CSS/offset|.offset()]] method allows you to find the offset of the element (as ‘top’ and ‘left’) from the top-left corner of the document.

.height() / .width() for document and window

The .height() and .width() now work on the document and window objects; allowing to get the height and width of the document body and the window viewport.

.stop()

Stops all the currently running animations on all the specified elements. If any animations are queued to run, then they will begin immediately.

%/em Animation

Animations can now be done using em values or percentages as well as pixel values. They can even be mixed within the same animate() call.

Color Animations

A new [http://jquery.com/plugins/project/color official jQuery plugin] that supports animating CSS colors of elements by using the new jQuery.fx.step.

Supported CSS properties: ‘backgroundColor’; ‘borderBottomColor’; ‘borderLeftColor’; ‘borderRightColor’; ‘borderTopColor’; ‘color’; ‘outlineColor’.

Colors can be specified as one of a pre-set range of named colours; in rgb format (ie ‘rgb(221,221,221)’); hex (ie ‘#dddddd’); or shorthand hex (ie ‘#ddd’).

Relative Animations

Relative animations behave just like normal animations, but their units are specified as being relatively position according to the current position of the element, rather than being an absolute position.

You can specify a relative animation by writing the number and (optional) units as string, preceded by a “+=” (for a relative animation that adds to the current position) or “-=” (that takes away from the current position).

Simultaneous Animations

As has always been the case, animations in jQuery are automatically queued, which allows animate() calls to be chained.

Now, if a queue: false flag is included in the options of animate(), then that animation will not go in the queue and will begin running immediately.

.queue() / .dequeue()

Two existing internal jQuery queueing methods have been tweaked and made more useful, for general animation use.

.queue() can be used to access and manipulate the animation queue for a particular element.

The following queueing methods were added:
* .queue()
Returns a reference to the first element’s queue (which is an array of functions).
* .queue(Function)
Adds a new function, to be executed, onto the end of the queue of all matched elements.
* .queue(Array)
Replaces the queue of all matched element with this new queue (the array of functions).

And the following dequeueing method was added: .dequeue() Removes a queued function from the front of the queue and executes it.

Extensible Animations

You can now extend jQuery animations with a function that is fired on every step of the animation that changes the style of the element being animated. It can be extended for specific css properties, or even to create a custom animation type.

For example, you can pass in an extra step function to .animate() to perform actions like animation synchronization.

Namespaced Events

This is a piece of functionality that’s especially useful for plugin authors. You can now provide a private name for the event handlers that you bind, allowing you to remove them again later (without having to maintain a private cache of all the handlers that you’re overseeing).

.triggerHandler()

A new method that can be used in addition to the original .trigger(). This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.

.wrapInner() / .wrapAll()

.wrapInner() is designed to wrap the inner child contents of each matched element (including text nodes); .wrapAll() will wrap all the elements in the matched set into a single wrapper element (this is different from .wrap() where each element in the matched set would get wrapped with an element).

.replaceWith() / .replaceAll()

replaceWith replaces all matched elements with the specified HTML or DOM elements. .replaceAll replaces the elements matched by the specified selector with the matched elements.

Cloning with Events

The .clone() method can now take an optional argument where, if true, it will also clone all the event handlers on all the cloned elements.

:has(selector)

This matches all elements that contain at least one element that matches the specified selector. This is a replacement for the XPath selector: [selector], included in jQuery 1.1 and older – :has() behaves identically.

:header

This matches all headers (h1, h2, h3, h4, h5, and h6 tags). This can be very useful for building Table of Contents for a page (especially where the order of the headers matters).

:animated

Matches elements that are currently being animated by, at least, one animation.

XPath Selector Plugin

Since XPath selectors were removed form jQuery in 1.2, a new [http://jquery.com/plugins/project/xpath XPath Selector Plugin] has been introduced. You can use this plugin to give yourself the CSS/XPath hybrid selectors that have existed in jQuery since its creation.

.map()

Translate a set of elements into another set of values (which may, or may not, be elements). You could use this to build lists of values, attributes, css values – or even perform special, custom, selector transformations. This is provided as a convenience method for using $.map().

.prevAll() / .nextAll()

Allows you to find all sibling elements before, or after, the current element.

.slice()

This method behaves just like an array’s native .slice() method, allowing you to cut up the jQuery set into reusable portions.

.hasClass()

The new .hasClass() method is a simple convenience method that sits on top of [[Traversing/is|.is()]], handling its most common use case (checking for a class name).

.andSelf()

Combine the two previous sets on the jQuery stack into a single matched set.

.contents()

Find all the child nodes inside the matched elements (this included text nodes). If you perform it against an iframe element, it returns its inner document.

How To Upgrade

If you have not done so already, please upgrade to jQuery 1.1.4. This should help to remove most of the surprises in between the last version of jQuery your code was using and the current release. Go through the list of deprecated and removed features and make sure that you’re not using any of them in your code. If any plugins that you’re using still require some of the old functionality, you can feel free to include the jQuery 1.1 Compatibility Plugin or the XPath Compatibility Plugin, depending on the situation.

jQuery 1.1 Compatibility Plugin

A few pieces of functionality were removed in the jQuery 1.2 release. Including this plugin allows you have all of the features that were removed in your copy of jQuery 1.2.

The plugin would typically be used like so:

XPath Compatibility Plugin

Since XPath selectors were removed from jQuery in 1.2, a new XPath Selector Plugin has been introduced. You can use this plugin to give yourself the CSS/XPath hybrid selectors that have existed in jQuery since its creation.

Color Animation Plugin

A new, official, jQuery plugin that supports animating CSS colors of elements by using the new jQuery Animation API. Supported CSS properties include: ‘backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’.

Removed Functionality

We’ve removed a number of methods in jQuery 1.2 that were relatively unused, causing confusion, or were inefficient. Wherever possible, we’ve provided alternate methods for performing the actions.

With jQuery 1.2, as with the jQuery 1.1 release, a backwards compatibility plugin has been provided. Thus, if you wish to continue using these particular methods, you’ll be able to use that plugin and continue doing so.

Additionally, in order to handle the XPath changes another, separate, plugin has been made available that will handle XPath selector functionality in jQuery.

DOM Manipulation

Calling the clone method with an argument is being deprecated (the clone method, as a whole, is being kept). Instead of calling .clone(false) you should now do: .clone().empty() instead.

DOM Traversing

The .eq() method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method). You can duplicate .eq() like so:

$("div").slice(0,1);

The .lt() method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method).

The .gt() method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method).

The .contains() method is being deprecated in favor of just using a regular .filter() statement. You can duplicate .contains() like so:

$("div").filter(":contains(Your Text)");

Ajax

$("#elem").loadIfModified("some.php"): This convenience method is being removed in favor of the long form use of $.ajax():

$.ajax({
  url: "some.php",
  ifModified: true,
  success: function(html){
    $("#elem").html(html);
  }
});

$.getIfModified("some.php"): This convenience method is being removed in favor of the long form use of $.ajax():

$.ajax({
  url: "some.php",
  ifModified: true
});

$.ajaxTimeout(3000): This convenience method is being removed in favor of the long form use of the more-explicit $.ajaxSetup():

$.ajaxSetup({timeout: 3000});

$(...).evalScripts(): This method is no longer necessary in jQuery – all scripts included in HTML strings are automatically evaluated when injected into the document. No substitute method is needed.

jQueryCamp ’07 (Boston)

Posted on by

We’re going to be having the first all-day jQuery mini-conference October 27th, here in Boston, MA. Already, a large portion of the jQuery team will be attending and giving talks – so if you’re interested in meeting some of the people who’ve helped to make jQuery possible and chatting with fellow developers, then this is a fantastic place to do it!

This event will be immediately following the Ajax Experience conference. A number of people are coming to both events, generally sponsored as business travel by their employer. If you need any more details about the events in order to coordinate that, please let me know.

Be sure to add yourself to the registration list so that we know how large of a venue to get. Hope to see everyone there!

If you, or your company, is interested in sponsoring this event, please contact John Resig. We’re generally looking for a couple hundred dollars to help defray the cost of food – and if we get enough, t-shirts for those who attend.