DailyJS

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

20 Mar 2012 | By Alex Young | Tags jquery plugins ender frameworks libraries
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Declarative

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">
</form>

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

declarative.mappings.add({
  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:

declarative.apply('counter').to(document);

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

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

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

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();

Module.extend({
  init: function() {
    this.emit('ready');
  }
});

Modules include data methods for getting and setting attributes:

var module = Stapes.create();

module.set({
  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.


blog comments powered by Disqus