DailyJS

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

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

jquery ui plugins jqueryui

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

Posted by Alex R. Young on .
Featured

jquery ui plugins jqueryui

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

Posted by Alex R. Young on .

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
.

jquery-floating-widget

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.