jQuery Roundup: jQuery UI Tabs Redesign, jquery-floating-widget, Ninja UI

2011-05-24 00:00:00 +0100 by Alex R. Young

jQuery UI 1.9 Milestone 5 – Tabs Redesign

The jQuery UI blog covered the most recent milestone release in jQuery
UI 1.9 Milestone 5 – Tabs
This version updates the Tabs
to make it more
consistent with other jQuery UI widgets.

Details of the changes are available in this post: Tabs API


I was trying to vertically float an advert using CSS so it was always
visible on the page, but only scrolled up to a certain point. It was
hard to get it to behave properly with the particular layout I was
using, so I ended up writing some JavaScript to do it.

If only I had
jquery-floating-widget! This plugin, by Takeru Suzuki, does exactly what I needed. Just drop it
in a page with \$('.floating-widget').floatingWidget(); and
some suitable CSS (detailed in this blog
and you should get something like this: jquery-floating-widget

Ninja UI

Ninja UI (GitHub: ninja / ui, License: Apache 2.0) by Jamie Hoover
and Faisal Jawdat is a plugin that includes lots of UI widgets and

The API looks a bit like jQuery UI:

/* Tabs */
var $tabs = $.ninja().tabs({
  choices: [{
    html: 'One',
    select: function () {
      console.log('Local tab function called.');
    html: 'Two',
    html: 'Three',
  choice: 2
}).select(function (event) {
  console.log('Global tab function called returning: ' + event.html);
$examplesBody.append($title.clone().text('Tabs'), $tabs);

I pulled this from the
examples.js file on the project's site.