The JavaScript blog.


jquery plugins maps tags widgets

jQuery Roundup: Mapael, Velge

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.



Mapael (GitHub: neveldo / jQuery-Mapael, License: MIT) by Vincent Brouté is a Raphael-based vector map plugin:

With Mapael you can display a map of the world with clickable countries. You can build data visualisations by setting some parameters in order to automatically set a color to each area of your map and generate the legend. Moreover, you can plot cities on a map with their latitude and longitude.

The basic API looks like this:

  map: {
    name: 'world_countries'

Vincent has some examples in the readme, for example, this map of France on JSFiddle.


Velge (GitHub: dscout / velge, License: MIT, bower: velge) by Parker Selbert is a tag widget, inspired by the tagging UI found in Pivotal Tracker.

It supports sorting, validation, data normalization, pattern matching, keyboard shortcuts, and callback methods for things like tag addition and removal.

The API is based around a constructor:

var velge = new Velge($('.container'), { single: true });  

The instance will then accept callbacks like this:


It's tested with Mocha and installable with Bower!


libraries jquery plugins tags rest debugging

jQuery Roundup: 1.7.2, Filtrify, JsBehaviour, Rest Test Test

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery 1.7.2

jQuery 1.7.2 has been released. This release mainly includes fixes, but there are also tweaks that improves API consistency. There's an important note for jQuery Mobile users on which jQuery version to use:

If you're using jQuery Mobile, please use jQuery 1.7.2 only with jQuery Mobile 1.1. For previous versions of jQuery Mobile, stay with jQuery core 1.7.1 or earlier.


Filtrify screenshot

Filtrify (GitHub: luis-almeida / filtrify, License: MIT) by Luís Almeida is a Chosen-inspired tag filtering plugin. It allows multiple tags to be selected and searched, and multiple Filtrify instances can be used on a single page.

The markup is based on data attributes:

<div id="placeHolder"></div>

<ul id="container">  
  <li data-genre="pop, rock, british, classic rock"> The Beatles </li>
  <li data-genre="rock, british, blues, classic rock"> The Rolling Stones </li>
  <li data-genre="alternative, electronic, female vocalists"> Björk </li>
  <li data-genre="rock, alternative, grunge"> Foo Fighters </li>
  <li data-genre="rock, classic rock"> Bruce Springsteen </li>

Now calling $.filtrify('container', 'placeHolder') will add the selector to the page.

The plugin accepts lots of options, including a property for supplying a callback that fires when tags are added or removed.


JsBehaviour (License: MIT) by DracoBlue is similar to Declarative that we featured last week -- both are essentially tools for associating complex behaviour with markup as unobtrusively as possible.

Handlers must be registered with jsb:

jsb.registerHandler('example', function(el, options) {  
  element.textContent = 'I am loaded with name: ' + options.name;

Then parameters can be supplied to JsBehaviour like this:

<span><input class="jsb_ jsb_example" type="hidden" value="{&quot;name&quot;:&quot;Jan&quot;}" />Are you loaded?</span>  

Running this example would produce I am loaded with name: Jan.

JsBehaviour expects "enhanced" elements to include a jsb_ class. The author has written more about this library with examples on the JsBehaviour blog.

Rest Test Test

Rest Test Test (GitHub: jeroenooms / resttesttest) by Jeroen Ooms is a jQuery and Bootstrap-based HTTP testing tool. It allows various HTTP methods to be issued, along with parameters. The results are displayed with the associated HTTP headers.

The author recommends using this with Firebug for testing REST services and Cross Origin Resource Sharing (CORS).