jQuery 3 State Switch Plugin

라디오버튼, 체크박스 사용시에 선택여부 및 리스트 아이템의 상태를 동시에 보여주는 plugin 으로
검색 결과에 대해서 정렬이나 필터링 인터페이스틀 포함하고 있습니다. 



* 전체소스

jquery.j3ssw.all_0.zip

* 사용방법

1.  Setup

jQuery 3 State Switch Plugin 을 이용하기 위해서는 2개의 js파일과 css 파일 하나가 필요합니다.
   - jQuery 라이브러리
   - jQuery 3 State Switch Plugin 라이브러리
   - CSS

<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>    // jQuery 라이브러리
<script type="text/javascript" src="/js/jquery.j3ssw.js"></script>   // jQuery 3 State Switch Plugin
<link rel="stylesheet" type="text/css" href="./css/jquery.j3ssw.css" media="screen" />

2.  Markup

jQuery 3 State Switch Plugin 은 보통 아래와 같은 형식으로 Markup을 합니다.


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

태그와 속성

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



3. 초기화

jQuery 3 State Switch Plugin 를 시작하려면, DOM 이 준비된 후에 아래와 같이 j3ssw() 함수를 호출하여 초기화를 합니다.

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


j3ssw() 함수의 구성

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.  (클릭시 true / false 의 두개의 상태)
3 : selected switch switches 3 (true / false / unselect) states by click.  (클릭시 true / false / unselect 의 세개의 상태)

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.

사용예)

<script type="text/javascript">
<!--
$(document).ready(function() {
 
 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);
 }

}
//-->
</script>