QuickWire, a jQuery Plugin

What It Does
Demos/Examples
Usage
Setting up the configuration variable
Download
History

What It Does

QuickWire allows you to "wire up" your form elements to show/hide actions in a simple configuration variable, saving you, the developer, from tedious, repetitive coding.

The benefits become readily apparent when you have many of these interactions to set up on a single page. You can set them all up in a single call, and easily apply the same show/hide action to all the events, giving your users a consistent UI.

How many times have you written this code, or something like it?

// function to show div on checkbox checked
var showdiv = function() {
     if ( $(this).is(":checked") ) {
        $("#mydiv").slideDown("fast");
     }
     else {
        $("#mydiv").slideUp("fast");
     }
};

// bind function to check box
$("#mycheck").click(function() {
	showdiv();
});

// run once on page load
showdiv();
With QuickWire, you can do this instead of all that code:
$.quickwire('bindandrun', { mycheck: '#mydiv' });

Demos/Examples

Example A: Simple show/hide - uses default action - slideDown(300) / slideUp(150)
check_a
This is div_a.
var conf = { check_a: '#div_a' }
$.quickwire( 'bindandrun', conf );
Example B: Checkbox show/hide - custom global action (fadeIn/fadeOut)
check_b
This is div_b.
var conf = { check_b : '#div_b' };
var opts = { showAction: 'fadeIn',
		hideAction: 'fadeOut',
		showParams: 1000,
		hideParams: 200 };
$.quickwire( 'bindandrun', conf, opts );
Example C: Radio Button Show/Hide
The divs to show are mapped to the radios via the "showValues" array. Pass in the values which correspond to a show condition.

radio_c (value 1)
radio_c (value 2)
radio_c (value 3)

This is div_c.
Code:
var conf = { radio_c: 
		{ block: '#div_c',
		showValues: [ 1, 2 ] }
};
$.quickwire( 'bindandrun', conf );
Example D: Select Menu Multi Show/Hide
Multi to multi: The divs to show are mapped to the value of the selected option.

select_d:

This is div_dog.
This is div_cat.
This is div_bus.
var conf = { select_d:
		{ block: 
			{ 'cat': '#div_cat',
			'dog': '#div_dog',
			'bus': '#div_bus'
			}
		}
	};
$.quickwire( 'bindandrun', conf );
   


Usage

$.quickwire( type[string], conf[object], options[object]);

Parameter Type Description
type String (can be 'bind', 'run', or 'bindandrun') Tells quickwire whether to bind show/hide function or run, or both - bindandrun will bind the function and run it once when the page is loaded.
conf Object (hash) Name/Value pairs wherein the name maps to the target form element, and the value configures the blocks to show/hide. Will be different depending on the usage. See above examples for more help, or below "Setting up the configuration variable" for specifics.
options Object (hash) Global options for show/hide functions
Parameter Type Default
showMethod String slideDown
hideMethod String slideUp
showParams Integer or String 300
hideParams Integer or String 150


Setting up the Configuration variable

  TYPE USE
Name string Set to name or id of target form element
Value (basic) jQuery selector Select target block - see example A above.
Value (complex) object Configure based on desired usage
Parameter Type Example
block May be String or Object
String: jQuery selector of block
Object: special configuration (radio or select multi-to-multi) - map select or radio values to block to show. See example D above.
'#mydiv'
showValues Array - values which, when target element is evaluated, will result in block being shown. See example C above. [ 1, 2 ]
showMethod String slideDown
hideMethod String slideUp
showParams Integer or String 300
hideParams Integer or String 150

 

Download

jquery.quickwire.js (3K)
jquery.quickwire.pack.js (1K)


History

Version 0.0.1 Released December 2007