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

24 May 2011 | By Alex Young | Tags jquery jqueryui plugins ui

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 Redesign. This version updates the Tabs API to make it more consistent with other jQuery UI widgets.

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


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 post) and you should get something like this: jquery-floating-widget demo.

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 icons.

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.

blog comments powered by Disqus