맘 가는대로

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



* 전체소스

* 사용방법

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>

다중 SELECT 박스를 처리할 수 있는 plugin로
첫번째 select 박스 선택에 따라 두번째 select 박스의 내용이 바뀌는 plugin 입니다.

Full Source 

1. 기본코드

$(document).ready(function()
{
        "Vegetables": {
             "key" : 10,        
                 "defaultvalue" : 111,   // 기본적으로 두번째 select box 값으로 potate 선택
             "values" : {
                     "tomato": 110,      // 항목 : 값으로 구성 
                     "potato": 111,
                     "asparagus": 112
                     }
              },
            "Fruits": {
                 "key" : 20,
                 "defaultvalue" : 212,   // 기본적으로 두번째 select box 값으로 kiwi 선택
                 "values" : {
                     "apple": 210,
                     "orange": 211,
                     "kiwi": 212,
                     "melon": 213
                     }
              }
    };
    $('#first').doubleSelect('second', selectoptions);     
});
   

2. 기본항목을 설정하는 예제

$(document).ready(function()
{
        "Vegetables": {
             "key" : 10,              
                 "defaultvalue" : 111,   // 기본적으로 두번째 select box 값으로 potate 선택
             "values" : {
                     "tomato": 110,      // 항목 : 값으로 구성 
                     "potato": 111,
                     "asparagus": 112
                     }
              },
            "Fruits": {
                 "key" : 20,
                 "defaultvalue" : 212,   // 기본적으로 두번째 select box 값으로 kiwi 선택
                 "values" : {
                     "apple": 210,
                     "orange": 211,
                     "kiwi": 212,
                     "melon": 213
                     }
              }
    };

 var options = {emptyOption: true}; 
    $('#first').doubleSelect('second', selectoptions, options);
});

- emptyOption 값이 true 일 경우 위와 같이 Choose를 기본으로 선택됩니다.  

 3. select box 처음 로딩시 값을 설정하고 기본항목을 사용자 설정하는 예제

$(document).ready(function()
{
        "Vegetables": {
             "key" : 10,              
                 "defaultvalue" : 111,   // 기본적으로 두번째 select box 값으로 potate 선택
             "values" : {
                     "tomato": 110,      // 항목 : 값으로 구성 
                     "potato": 111,
                     "asparagus": 112
                     }
              },
            "Fruits": {
                 "key" : 20,
                 "defaultvalue" : 212,   // 기본적으로 두번째 select box 값으로 kiwi 선택
                 "values" : {
                     "apple": 210,
                     "orange": 211,
                     "kiwi": 212,
                     "melon": 213
                     }
              }
    };
   
    var options = {
                    preselectFirst : 10, // 초기에 첫번째 Select Box 항목을 Vegetables 로 선택
                    preselectSecond : 112,  // 초기에 두번째 Select Box 항목을 asparagus 로 선택
                    emptyOption: true,     // 기본항목 있음.
                    emptyValue: '...',      // 기본항목 text --> '...'
                    emptyKey: 'nothing'     // 기본항목의 키값 'nothing'
                   };
                  
    $('#first').doubleSelect('second', selectoptions, options);     
});

Prototype.js 안에는 absolutize(element) 라는 함수가 있어서 상대적인 위치를 절대적인 위치로 변경이 가능하나, jQuery 안에는 이와 같은 함수가 없다고 합니다.
다행히 Carbon Five 의 james 라는 분이  jQuery 의 plugin으로 absolutize 함수를 구현 하셨네요.
어디가나 비슷한 고민을 하는 사람이 많은가 봅니다.


1. jQuery 안에서 함수사용방법

$('some-selector').absolutize()



2. 함수코드

jQuery.fn.absolutize = function()
{
  return this.each(function()
  {
    var element = jQuery(this);
    if (element.css('position') == 'absolute')
    {
      return element;
    }
 
    var offsets = element.offset();
    var top = offsets.top;
    var left = offsets.left;
    var width = element[0].clientWidth;
    var height = element[0].clientHeight;
 
    element._originalLeft = left - parseFloat(element.css("left") || 0);
    element._originalTop = top - parseFloat(element.css("top") || 0);
    element._originalWidth = element.css("width");
    element._originalHeight = element.css("height");
 
    element.css("position", "absolute");
    element.css("top", top + 'px');
    element.css("left", left + 'px');
    element.css("width", width + 'px');
    element.css("height", height + 'px');
    return element;
 
  });
}