Paul Bakaus & the jQuery UI Team has released a major update jQuery UI 1.5.

There seem to be three major pieces to the news:

API Refactoring

What we came up with, was an API that removed 95% of our exposed methods, and kept only one single overloaded method per plugin. For example:

• $(”div”).draggable() creates a draggable
• $(”div”).draggable(”destroy”) destroys it
• $(”div”).draggable(”method”) calls another method on the plugin.

The new API also makes all callbacks behave similarly, exposes the default options for each plugin and intelligently cleans up plugins using remove(). We also made it possible to update plugin options on the fly, and added smaller updates that make UI feel like one suite.

In order to make this happen, we removed the jquery.dimensions.js (which can now be found in jQuery core), the ui.mouse.js and the *.ext.js dependancies, introduced a ui.core.js (which includes many useful helpers) and created the jQuery UI widget factory which makes creating a new plugin for UI amazingly simple while making it very difficult to break the API.

Effects: Internalizing Enchant

One of the great things in being able to take a step back is that it offers a totally different perspective on what a full-featured UI solution should offer. While jQuery UI v1.0 was currently offering a nice suite of UI controls, users were in need of solid effects like those offered in libraries such as script.aculo.us and jQuery UI’s former inspiration, Interface. Unfortunately, Interface was no longer being updated which left a bit of a hole in terms of effects; hence a new project called “Enchant” was born. Originally planned to be released as a complementary library to jQuery and jQuery UI, we realized that it made perfect sense to merge Enchant with jQuery UI allowing users easy access to advanced effects and UI controls from one solution.

We’re proud to announce that Enchant is now a part of jQuery UI and jQuery users now have a unified solution for their effects and UI needs. The jQuery UI effects can be used standalone or together with UI and have a separate core which extends the jQuery core to introduce advanced easing, class transitions (morphing) and color animations. All effects are tightly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).

Overall, we already have more than 15 ready-to-use effects for you to use in your projects, not only those provided by script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh, new effects (transfer, explode. clip, scale) that make jQuery UI a great library enhancing your applications!

As promised in one of the last blog posts, it comes with a complete documentation and a combined demo page to let you see them in action.

Create your own Themes, with help

ThemeRoller is an application itself that allows you to create themes on the fly and save them out. The Filament Group did the work and blogged about how.

The jQuery team also wanted to give a shout out to Liferay, “who invested countless hours into the development of the new UI website, and with whom we worked closely together to stabilize jQuery UI for all kinds of enterprise situations.”

A new release of jQuery is out — 1.2.6, skipping directly from 1.2.3. Most noteworthy are the performance improvements (you can check out the detailed performance data via this Google Spreadsheet). The headlines on improvements:

• Event handling: 103%
• CSS selectors: 13%
• .offset: 21%
• .css: 25%

Lots of other fixes, but the most important, IMHO, is the inclusion of Brandon Aaron’s Dimension’s plugin — cross browser support for find element dimensions, offsets and positioning — in the jQuery core. Check out the release notes here.

Just when you thought that datepickers had been played out, along comes Filament Group and puts a whole new spin on it. Working from Mark Grabanski’s jQuery UI DatePicker control, the team substantially enhanced the UI with a host of new features including:

• shortcut links to preset date ranges, for example, “Past 30 days” or “Current YTD,”
• links to “All dates before…” and “All dates after…” to simplify selecting a range of values where the data set is very large or the high or low end value is an unknown, and
• only showing the number of calendars needed for choosing a particular range (i.e., you only need one calendar to choose “All dates before…”, but you’ll need two to select a custom range).
• Use of progressive enhancement for graceful degradation /li>

Check out the demo here.

When Jay Salvat set out to build markItUp!, he wasn’t trying to build the next FCKEditor or TinyMCE. He just wanted to build a simple editor that could allow developers to add enhanced markup capability to textarea elements.

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.

The usage is very straightforward. The following code demonstrates the ease of using markItUp!:

The code generates a very intuitive markup editor as demonstrated below:

The script also provides several different options for the editor which adjust the style of editing. You can see those on the examples page.

The main highlights of markItUp! include:

• Fast and unobtrusive integration
• Support for keyboard shortcuts
• Toolbar and drop down menus
• Fully customizable and scriptable
• Editor’s features callable from any place
• Ajax dynamic preview
• Customizable Skins
• Tested on PC: IE6/7, Firefox 2, Opera 9+, Safari 3
• Tested on OSX: Safari, Opera 9+ and Firefox 2
• License: MIT/GPL
• Packed naked engine is about 5.5 kb

The jQuery UI team announced today the release of alpha versions of jQuery UI 1.5a and jQuery Enchant 1.0a! The projects aim to address the need for a strong set of UI controls and effects to complement the jQuery JavaScript library.

I’m very happy to announce the first alpha release of both jQuery UI 1.5 and jQuery Enchant 1.0 to all the adventurous guys out there. This is a huge update – the whole API has been standardized and updated, and many of the plugins have been completely rewritten. jQuery Enchant is the missing part of UI: A library completely devoted to rich effects. It already features all effects you know from scriptaculous/interface, as well as many more great additions: color animations, class animations and highly configurable effects.

Taking a much more cautious approach this time around, the team has made it clear that this is an alpha release which will go through further testing and has requested heavy community involvement to ensure solid libraries are released in a final version.

The code and demos for the two libraries can be found here:

jQuery UI:
http://jqueryjs.googlecode.com/files/jquery.ui-1.5a.zip
http://ui.jquery.com/1.5a/demos/

jQuery Enchant:
http://jqueryjs.googlecode.com/files/jquery.enchant-1.0a.zip
http://ui.jquery.com/enchant/1.0a/demos/

It’s important to note that both jQuery UI and Enchant require the newly jQuery v1.2.3 which was released last night.
http://code.jquery.com/jquery-1.2.3.js
http://code.jquery.com/jquery-1.2.3.min.js
http://code.jquery.com/jquery-1.2.3.pack.js

Jörn Zaefferer went absolutely feature crazy when he decided to update his jQuery Validation plugin. Update is putting it mildly with “overhaul” coming immediately to mind.

Here are some of the cool new features added in:

• AJAX-captcha validation example (based on http://psyrens.com/captcha/)
• Support for “remote” ajax-validation. In other words: Remote validation is now possible and very easy to use.
• Added highlight and unhighlight options, by default toggles errorClass on element, allows custom highlighting
• Added valid() plugin method for easy programmatic checking of forms and fields without the need to use the validator API
• Added rules() plguin method to read and write rules for an element (currently read only)
• Replaced regex for email method, thanks to the contribution by Scott Gonzalez, see http://projects.scottsplayground.com/email_address_validation/
• Restructured event architecture to rely solely on delegation, both improving performance, and ease-of-use for the developer (requires jquery.delegate.js)
• Added feature to merge min + max into and range and minlength + maxlength into rangelength
• Added support for dynamic rule parameters, allowing to specify a function as a parameter eg. for minlength, called when validating the element
• Allow to specify null or an empty string as a message to display nothing
• Rules overhaul: Now supports combination of rules-option, metadata, classes (new) and attributes (new), see rules() for details
• Added remember-the-milk-demo (thanks RTM team for the permission!)
• Added marketo-demo (thanks Glen Lipka!)

One of the best features of this release is the remote validation via Ajax. This is extremely easy to implement with the code being as simple as this:

If you enter an email address, the validation plugin sends a request to the server with a parameter “email” and the value you entered. The server-side code can do it’s magic and send back the appropriate response based on the user input.

Adding client-side validation to a form can significantly improve the usability of that form, making it much easier for users to fill them out successfully. But pure client-side validation has severe limits where necessary information is available only on the server. Ajax helps to bridge the gap, but synchronizing validation on form submit isn’t exactly an easy task. The validation plugin makes it as simple as pure client-side validation. All you need to do is to specify a rule “remote” for a field and provide a parameter that points to a server-side resource that handles the validation.

To see the plugin in action, Jörn has created some demos using styling from Marketo.com and Remember the Milk. You can see some screenshots below.

John Resig has created a little script to give you pretty dates that Web 2.0 know and love (thanks Rails):

The library is short and sweet:

Ariel Flesler has a nice little jQuery plugin, ScrollTo, that lets you scroll with many configuration options:

• Axes to be scrolled, ‘x’, ‘y’, ‘xy’ or ‘yx’.
• Animation length (or by default, no animation)
• Easing method
• Whether to take in account, the margin of the target element
• If both axes are chosen, whether to animate together, or queue the animations.
• The possibility to add/deduct from the end position a defined amount of pixels.
• If queing, a callback function to be called after the first scrolling.
• A callback function to be called after the whole scrolling ended.

For example:

We talked about scrolling in Prototype in the past.

jQuery has a new release, 1.2.2, which is a bug fix release and more. This release comes on the 2nd birthday of jQuery:

I remember doing the first release at BarCamp NYC (combined with the mention of two other projects of mine that fizzled: Feed Pile and Idea Shrub). While I had released a bunch of open source code in the past, this was the first one that I put some serious effort into getting publicity. Luckily it made it onto del.icio.us/popular, digg – and the rest is history.

Amusingly, the entire chain of popularity was due to the fact that I made a troll-y comment on a Prototype blog post (when they announced their new selector feature) and it was discovered and re-blogged by Ben Nolan (creator of the Behaviour library for Prototype). From there it hit the Rails community and was launched onto del.icio.us, digg, etc.

The major changes are:

• 300% Speed Improvements to $(DOMElement)
• .ready() Overhaul: Uses Diego Perini’s non-document.write() technique, now wait for CSS to be ready, can now watch for the document ready event via the traditional .bind()
• .bind(”mouseenter”) / .bind(”mouseleave”)
• Complex :not()
• Accepts Headers
• Event API: jQuery.event.special setup teardown handler

You can download the latest release (minified).

Drawing on inspiration from Plotr and PlotKit, software developer Ole Laursen wanted to bring the same plotting functionality to jQuery. So he built his own jQuery plugin and called it Flot. While a bit oddly named, the first release of Flot, v0.1, already provides some impressive capabilities:

The project actually got started because we were growing dissatisfied with Plotr which looks nice but is pretty dumb when it comes to auto-detecting stuff and didn’t have any interactive features which we needed for a custom web-based business intelligence application.

Demos of the Flot plugin can be found at Ole’s site. The code for the plugin is hosted via Google Code.