jQuery Roundup: Jsonify, jquery-download, jqPagination

17 Jan 2012 | By Alex Young | Tags jquery plugins json pagination
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Jsonify

Jsonify by Jorgen Horstink can serialize DOM elements into JSON through the use of HTML5 data attributes. The two attributes, data-jsonify-name and data-jsonify-getter, are used to map and process values as they’re serialized:

$.jsonify({
  getters: {
    fruit: function () {
      return this.html().toLowerCase();
    }
  }
});

Then $('form').jsonify() can be used to process a form with fields like this:

<span data-jsonify-name="food.fruit[0].name" data-jsonify-getter="fruit">Orange</span>:
<input type="checkbox" data-jsonify-name="food.fruit[0].value" value="yes"><br>

<span data-jsonify-name="food.fruit[1].name" data-jsonify-getter="fruit">Banana</span>:
<input type="checkbox" data-jsonify-name="food.fruit[1].value" value="yes"><br>

<span data-jsonify-name="food.fruit[2].name" data-jsonify-getter="fruit">Strawberry</span>:
<input type="checkbox" data-jsonify-name="food.fruit[2].value" value="yes"><br>

jquery-download

jquery-download demo

jquery-download (License: BSD, Demo: jquery-download demo) by John Krauss allows the DOM, or parts of it, to be downloaded through data: URIs. The author’s demo has some SVG, so this plugin could be used to extract and download SVG as it’s edited.

The same author has a load of new stuff on GitHub at github.com/talos.

jqPagination

jqPagination screenshot

jqPagination (GitHub: beneverard / jqPagination, License: GPL v3) by Ben Everard is a different interface for pagination: next and previous selectors are displayed, but if the current page text is clicked then a page number can be entered. A callback gets the current page number when it’s changed:

$('.pagination').jqPagination({
  paged: function(page) {
    // do something with the page variable
  }
});

In the callback, anything could happen: the current location could be changed, or an Ajax method could load more content from a RESTful API. The author has included CSS as part of the plugin’s source.


blog comments powered by Disqus