jQuery Roundup: Knob, OmniWindow, bPopup, Pageflipper, Tiler

2012-05-15 00:00:00 +0100 by Alex R. Young
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery Knob

jQuery Knobs

jQuery Knob (GitHub: aterrien / jQuery-Knob, License: MIT/GPL) by Anthony Terrien is a nice and configurable dial widget.

It can be configured to exhibit a wide range of behaviours, from value range entry to an iPod clicker-style "infinite" wheel. The value that is displayed can be directly manipulated as well, and it works with scroll wheels and touchscreens.


OmniWindow (GitHub: 0x000000 / OmniWindow, License: MIT) by Alexander Rudenko is a fairly small modal window plugin, and the author has attempted to target it at programmers rather than designers.

The documentation is good and covers the main use-cases, and despite stating that the plugin doesn't support tonnes of options, it includes enough to keep it flexible.

It's based around events, so it can be used like this:


And it allows class names to be overridden, in case you want to integrate it with an existing project:

  overlay: {
    selector: '.custom-overlay', // don't forget the period symbol!
    hideClass: 'custom-overlay-closed'
  modal: {
    hideClass: 'custom-modal-closed'


bPopup by Bjørn Klinggaard is another modal plugin that is simply triggered by calling $('element_to_pop_up').bPopup(). By default it'll reposition the popup when the browser's size is changed.

For full details on the available downloads and source code, see 21.04.12: New release, bPopup version 0.7.0.


Pageflipper (GitHub: wtw-software / pageflipper, License: MIT) from wtw-software uses CSS3 transitions to creative a native-feeling page sliding effect. It looks like something that would appeal to mobile web developers, but will also work with a mouse.

It can also be controlled programmatically:



Tiler (GitHub: borbit / tiler, License: MIT) by Serge Borbit is a library for working with infinite grids of tiles. This could be used to display map content, but the author has designed it with games in mind.

It feels more like a standard JavaScript library than a jQuery plugin (although jQuery is a dependency), so using it requires creating an instance of a Tiler object:

var tiler = new Tiler($('#viewport'), {
  tileSize: 200,

  sync: function(options, callback) {
    var tosync = options.tosync;

    tosync.forEach(function(tile) {
      var img = new Image();
      var x = tile[0];
      var y = tile[1];

      img.onload = function() {
        callback([[x, y, $('<img/>').attr('src', img.src)]]);

      img.src = 'image_' + x + '_' + y + '.png';

QUnit tests are included.