Customized Window radio, multi-select, sort using jquery (3 state switch plugin)

Overview:

jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time.
The applications of J3SSW includes some interfaces for sort key or filter key of any search results.

To understand J3SSW,Click Eaxmple Tab above and check operations of some examples.

Usage:

1．Setup

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" />

2．Markup

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>

3．Initialize

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>

4．Complete

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

VIEW DEMO

DOWNLOAD

http://www.memorycraft.jp/project/jquery/j3ssw/index.html