%META:TOPICINFO{author="ProjectContributor" comment="" date="1731055688" format="1.1" version="1"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%
%JQPLUGINS{"metadata"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
This plugin is capable of extracting metadata from classes, random attributes,
and child elements.
%ENDSECTION{"summary"}%

---++ 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:

<verbatim class="tml">
%JQREQUIRE{"mynewplugin"}%
</verbatim>

This is how the markup looks like:

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

<div>
</verbatim>

This is the plugin's initializer reading the metadata:

<verbatim class="js">
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);
  });
});
</verbatim>
