English | Japanese
Download (2.61KB)
Compression :

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.

Example

1.1 State (normal radio button)
view source
	$("div#state3-mode1").j3ssw({off:"state3down-sort", on:"state3up-sort", def:"state3def-sort", callback:listener1, mode:1});
	function listener1(selection, status){
		$("div.trace").eq(0).empty().append(selection + " : " + (status?"Z-A":"A-Z"));
	}
2.2 States (ex:sort key)
view source
	$("div#state3-mode2").j3ssw({off:"state3down-sort", on:"state3up-sort", def:"state3def-sort", callback:listener2, mode:2});
	function listener2(selection, status){
		$("div.trace").eq(1).empty().append(selection + " : " + (status?"Z-A":"A-Z"));
	}
3.3 States (ex:3 state sort key)
view source
	$("div#state3-mode3").j3ssw({off:"state3down-sort", on:"state3up-sort", def:"state3def-sort", callback:listener3, mode:3});
	function listener3(selection, status){
		$("div.trace").eq(2).empty().append(selection + " : " + (status?"Z-A":"A-Z"));
	}
4.3 State Multi (ex:search result filter for multi columns)
view source


$("div#state3-mode3multi1").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3, status:true});
$("div#state3-mode3multi2").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3, index:-1});
$("div#state3-mode3multi3").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3});
function listener4(selection, status, id, j3ssw){
	if(id == "state3-mode3multi1")$("span#trace4span").empty().append(j3ssw.getSelection() + " : " + (j3ssw.getStatus()?"Contain":"Not Contain"));
	if(id == "state3-mode3multi2")$("span#trace5span").empty().append(j3ssw.getSelection() + " : " + (j3ssw.getStatus()?"Contain":"Not Contain"));
	if(id == "state3-mode3multi3")$("span#trace6span").empty().append(j3ssw.getSelection() + " : " + (j3ssw.getStatus()?"Contain":"Not Contain"));
}

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.

Extend

Configuration Object
In jQuery 3 State Switch Plugin(J3SSW), you can customize the behavior of action by passing a configuration object to activation method.
The configurations available are..

  • 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.

Public Method
jQuery 3 State Switch Plugin(J3SSW) has these public methods.

  • 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>

Changelog

Version 0.1 October 10, 2008

Initial release.

Feedback

If you have any comments or requests for this plugin,submit this form.
It's posted to http://j3ssw.tumblr.com/.
If you have an Tumblr account,
You can also contact directly.http://memorycraft.tumblr.com/

Thank you!