JQueryMetadata

This plugin is capable of extracting metadata from classes, random attributes, and child elements.

Usage

A lot of jQuery plugins are initialized and configured using metadata embeded into the markup thus eliminating the need to explicitly write JavaScript. A behavior is assigned to an html element by giving it the pertinent class name that the plugin listens to. Parameters to the plugin itself are embeded as a JSON object inside the class attribute. JQueryMetadata can also be encoded differently. Having it inside the class attribute as well is most common.

Examples

Load the plugin as required for the current page:

%JQREQUIRE{"mynewplugin"}%

This is how the markup looks like:

<div class="jqMyNewPlugin {key1:'value1', key2:'value2', key3:'value3'}">

<div>

This is the plugin's initializer reading the metadata:

jQuery(function($) {

  var defaults = {
    key1: 'default1',
    key2: 'default2',
    key3: 'default3'
  };

  // find all elements tagged .jqMyNewPlugin that aren't init'ed yet
  // ... using livequery instead of each to trigger initialisation of async content

  $(".jqMyNewPlugin:not(jqInitedMyNewPlugin)").livequery(function() {

     // create a jQuery object for this
     var $this = $(this);

     // prevent the markup to be init'ed multiple times
     $this.addClass("jqInitedMyNewPlugin");

     // get plugin options by merging defaults and current json objs
     var opts = $.extend({}, defaults, $this.metadata());

     // call the plugin handler
     $this.myNewPlugin(opts);
  });
});