jQuery 3 State Switch Plugin(J3SSW) depends only on jQuery Javascript Library.
To use J3SSW, Include these two JS files in your header.

<script type="text/javascript" src="./js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./js/jquery.j3ssw.js"></script>

Then include CSS file you create for the style for switches in your header

<link rel="stylesheet" type="text/css" href="./css/jquery.j3ssw.css" media="screen" />

J3SSW generates some switches from radio button.
Now that you have to markup radio buttons that can be seed of switches.
In addition, you must prepare div tags that can be a container of radio button and labels that can be click hit target for radio buttons.
In practice, J3SSW assign the switch styles to labels.

Required Tags and Attributes

   div : id
   label : for
   radio : id, name, value

<div id="j3ssw">
	<label for="mode1-1"><input type="radio" id="mode1-1" name="mode1-radio" value="Product">Product</label>
	<label for="mode1-2"><input type="radio" id="mode1-2" name="mode1-radio" value="Price">Price</label>
	<label for="mode1-3"><input type="radio" id="mode1-3" name="mode1-radio" value="Brand">Brand</label>
</div>

To make J3SSW work, Activate J3SSW after DOM readied.
In this initialization, Target selector must be div element that contains radio buttons.
You can pass configuration object to j3ssw() method if necessary.

<script type="text/javascript">
	<!--
	$(document).ready(function() {
		$("#j3ssw").j3ssw();
	}
	//-->
</script>

With that, you have completed your implementation of J3SSW.
To see some variations of implementation, click Example Tab or Extend Tab and try samples.

• index - initial selected switch index, default:0
• status - initial selected status, default:false
• def - default(unselected) style class name, default:"j3sswdef"
• off - off style class name, default:"j3sswoff"
• on - on style class name, default:"j3sswon"
• mode - select mode, default:2
  • 1 : selected switch has only one state.it represents normal radio button.
  • 2 : selected switch toggles 2 (true / false) states by click.
  • 3 : selected switch switches 3 (true / false / unselect) states by click.
• callback - reference a callback function which is called back when state is changed.
  the arguments are...
  • selection : value attirbute of selected radio button of the switch.(if not selected, it gets to undefined)
  • status : state of selected radio button.(true / false)
  • id : id attribute of DOM element of switch whose state is changed.
  • j3ssw : J3SSW object of switch whose state is changed.

• getSelection() - value attribute of selected radio button element.(if not selected, it gets to undefined)
• getStatus() - state of selected radio button.(true / false)

<script type="text/javascript">
<!--
$(document).ready(function() {
	//activate with configuration object
	var j3ssw001 = $("#filter001").j3ssw({index:2,
						status:true,
						def:"state3def-filter", 
						off:"state3down-filter", 
						on:"state3up-filter", 
						mode:3, 
						callback:listener001});
	//callback method
	function listener001(selection, status, id, j3ssw){
		alert(selection + " : " + status);
	}
	//get states out outside of callback method
	$("#showStateButton001").click(function(){j3ssw001.getSelection() + " : " + j3ssw001.getStatus()});

}
//-->
</script>