jQuery Puppet plugin aims to keep synchronized DOM Elements (the puppet) from a master.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
jquery.puppet.js

README.md

What is jQuery.puppet ?

jQuery.puppet is a jQuery plugin wich provides :

  • Basic synchronisation between HTML elements, basically from 'master' to its 'puppets'
  • An easy way to handle DOM events

Basic exemples

HTML markup :

<input id="master" type="text" value="0"/>
<input class="slave" type="text" />

Javascript :

$('#master').puppet($('.slave'));

Will keep synchronized #master value attribute with .slaves value attributes, wich is the default way the plugin works : jQuery.puppet set the puppets value attribute to the master value attribute, when master fire a 'change' event.

In other words, the code above is similar to this one :

$('#master').on('change', function(event) {
	$('.slave').val(this.value);
});

$('#master').trigger('change');

Documentation

Parameters

$(master).puppet(puppets [, options])

master : A jQuery selector pointing to the master element

puppets : A jQuery collection of puppets elements

[options]: Object , defaults to :

{
	'event'     : 'change',
	'master'    : $.fn.val,
	'puppet'    : $.fn.val,
	'fireOnInit': true,
	'callback'  : function(puppets) {
  		return settings.master.apply($(this));
	}
}

event (string, default: 'change') : Event to listen to

master (function, default: $.fn.val) : jQuery Object method used to get a value from the master HTML elements. It can be an array of two elements : a jQuery method and a value to pass as a parameter to this method. If you want to apply a non-jquery method directly on the HTML Element, you must change the callback function from settings.master.apply($(this)) to settings.master.apply(this)

puppet (function, default: $.fn.val) : jQuery Object method used to set a value to the puppets HTML elements. It can be an array of two elements : a jQuery method and a value to pass as a parameter to this method

fireOnInit (bool, default: true) : if true, the event will be fired on plugin init

callback (function, default: see below) : callback function for advanced event handling. master and puppets parameters are native HTML Elements. This return value may be used as a parameters for options.puppet method. Default to function(puppets) {return settings.master.apply($(this));}

Exemple of advanced uses without callback function

With this option, you can change the text color of puppets of a given hex value from an <input> element :

<input id="master" type="text" value="0"/>
<div class="slave">A text...</div>

Javascript :

$('#master').puppet($('.slave'), {'puppet' : [$.fn.css, 'color']});

Exemple of advanced use with callback function

You can use jQuery.puppet plugin to do more intersting things, like allow a single checkbox to control the checked status of puppets checkboxes.

<label>Master</label><input id="master" type="checkbox" />
<label>Slaves</label>
<p>
	<input class="slave" type="checkbox" />
	<input class="slave" type="checkbox" />
	<input class="slave" type="checkbox" />
	<input class="slave" type="checkbox" />
	<input class="slave" type="checkbox" />
	<input class="slave" type="checkbox" />
</p>

Javascript

var options = { 
	event : 'click',
    callback: function(puppets) {
        if($(this).is(':checked')) {
            $(puppets).prop('checked', true);
             return;
        }
                	
        $(puppets).prop('checked', false);

        return;
    }
};

$('#master').puppet($('.slave'), options);