jQuery Roundup: Declarative, jQR, Ender-Carousel, Stapes.js

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


Declarative (License: MIT, npm: declarative) by Alex Lawrence allows HTML to be mapped to behavioural JavaScript using mappings. The author's first example is a search form with a character counter that uses the following HTML:

<form action="/" method="POST">
  <input id="search" name="search" type="text" maxlength="50" />
  <span data-widget-counter="target: 'search', text: '{0} characters left'"></span>
  <input type="submit">

Notice the use of data attributes to supply options to the JavaScript mapping:

  id: 'counter',
  prefix: 'data-widget-',
  types: ['counter']
  callback: function(counter, type, options) {
    var input = document.getElementById(options.target);
    var maxlength = input.getAttribute('maxlength');
    countCharacters(input, counter, maxlength);

Once a mapping has been declared, it can be mapped to the whole DOM using apply:


None of this depends on jQuery, but the author has provided examples that demonstrate jQueryUI integration. Jasmine tests and examples are included in the project's source.


jQR (GitHub: Gottox / jQR, License: GPL3) by Enno Boland is a QR Code generator for jQuery. It's similar to jquery.qrcode.js by Jerome Etienne, featured previously on DailyJS -- both use the same method name:

$('#qrcode').qrcode('Hello World');

Jerome's plugin includes qrcode.js by Kazuhiko Arase, whereas Enno's plugin is a rewrite that's influenced by Kazuhiko's original code.


Ender-Carousel example

Ender-Carousel (GitHub: nemeseri / ender-carousel, ender: ender-carousel, npm: ender-carousel) by Andras Nemeseri is a carousel plugin for Ender that's jQuery-compatible. The Ender-Carousel Basic Configuration Tutorial has sample HTML, CSS, and JavaScript, which is just $('.carousel').carousel().


Stapes.js (GitHub: hay / stapes, License: MIT) by Hay Kranen is a small JavaScript MVC framework. Like other recent takes on MVC, it's based around events and inheritance. It also works nicely with RequireJS, jQuery, and Zepto.

Stapes uses modules:

var Module = Stapes.create();

  init: function() {

Modules include data methods for getting and setting attributes:

var module = Stapes.create();

  name: 'Alex'
, title: 'Mr'

module.get('name'); // Alex

Attributes can be removed, filtered, and updated. The author has written up full documentation and a rationale behind the project at the Stapes.js homepage.