라디오버튼, 체크박스 사용시에 선택여부 및 리스트 아이템의 상태를 동시에 보여주는 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;
 
  });
}

1. 왜 jQuery 인가 ?

페이지에 동적인 기능을 추가하기 위해서는 element , element group 을 선택하여, 선택된 element 를 페이지에서 감추거나 보여주고, 해당 element 에 CSS 클래스를 추가하거나 애니메이션 효과를 주어야 하는 데, 이런 경우 수십줄의 자바스크립트 코드를 직접 작성해야 합니다. 그러나 jQuery 를 이용하면 수십줄의 코드를 한두줄의 코드로 줄일 수 있습니다.

아래의 같이 행간의 색상이 대비되는 얼룩무늬 형태의 테이블을 만들 경우 기존 자바스크립트를 이용하면 열줄이상을 작성하셔야 합니다.
jQuery 라이브러리를 사용시에는 아래와 같이 한줄로 작성이 가능합니다. (여기에 jQuery 의 강력함이 있는 것 같습니다.)

$("table tr:nth-child(even)").addClass("striped");  

•  FULL SOURCE
  
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>얼룩 무늬</title>
      <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
      </script>
      <script type="text/javascript">
        $(function() {
          $("table tr:nth-child(even)").addClass("striped");
        });
      </script>
      <style>
        body,td {
          font-size: 10pt;
        }
        table {
          background-color: black;
          border: 1px black solid;
          border-collapse: collapse;
        }
        th {
          border: 1px outset silver;
          background-color: maroon;
          color: white;
        }
        tr {
          background-color: white;
          margin: 1px;
        }
        tr.striped {
          background-color: coral;
        }
        td {
          padding: 1px 8px;
        }
      </style>
    </head>

  <body>
    <table>
      <tr>
        <th>생산연도</th>
        <th>제조사</th>
        <th>모델</th>
      </tr>
      <tr>
        <td>1965</td>
        <td>Ford</td>
        <td>Mustang</td>
      </tr>
      <tr>
        <td>1970</td>
        <td>Toyota</td>
        <td>Corolla</td>
      </tr>
      <tr>
        <td>1979</td>
        <td>AMC</td>
        <td>Jeep CJ-5</td>
      </tr>
      <tr>
        <td>1983</td>
        <td>Ford</td>
        <td>EXP</td>
      </tr>
      <tr>
        <td>1985</td>
        <td>Dodge</td>
        <td>Daytona</td>
      </tr>
      <tr>
        <td>1990</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>1995</td>
        <td>Ford</td>
        <td>Ranger</td>
      </tr>
      <tr>
        <td>1997</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>2000</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>2005</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Unlimited</td>
      </tr>
      <tr>
        <td>2007</td>
        <td>Dodge</td>
        <td>Caliber R/T</td>
      </tr>
    </table>
  </body>
</html>

2. unobtrusive 자바스크립트

HTML 문서에서 스타일정보를 분리하는 것과 마찬가지로 문서에서 동작을 분리해서 사용하는 방법을 말합니다.
jQuery 의 창시자는 개발자들이 쉽게 동작을 분리할 수 있도록 라이브러리를 설계했습니다. (존경심이 나오네요 ^^)
사실 unobtrusive 자바스크립트에서는 HTML 페이지의 <body> 태그에 포함된 자바스크립트 표현식이나 구문은 잘못된 것으로 본다고 합니다.

아래는 기존의 방식에서 동작을 분리하는 방법에 대한 간단한 예제입니다.

기존방식 :
<button type="button" onclick="document.getElementById('xyz').style.color='red';">클릭하시오.</button>

jQuery 를 사용해서 변경 :
<button type="button" id="testButton">클릭하시오.</button>

<script type="text/javascript">
     window.onload = function() {
          document.getElementById('testButton').onclick = makeItRed;
     };

     function makeItRed()  {
         document.getElementById('xyz').style.color = 'red';
     }
</script>

unobtrusive 자바스크립트를 구현할 경우 위의 경우와 같이 코드의 양이 많이지는 불편함이 있습니다. 
하지만 jQuery 를 이용할 경우 적은 코드의 양으로도 동일한 효과를 얻을 수 있습니다.

스크립트 라이브러리의 시대 그리고 jQuery

필자의 잡담~ 이번엔 빠르게 마무리 해보리라 맘 먹고 써보는 jQuery 강좌입니다. 무엇보다 제 자신에게 자극이 되는 강좌이기를 바라고 있어요.

jQuery는 최근 각광을 받고 있는 경량의 오픈 소스 자바스크립트 라이브러리의 이름입니다. 물론, 최근에 한번씩은 들어보셨죠? 지난 1월에 있었던 태오 사이트 신년 세미나(비정기)에서도 정석모 시삽이 이에 대한 이야기를 발표해서 저는 능가하는 인기를 끌었던 바로 그 소재이기도 합니다. 기존에 Ajax를 해 보신 분은 익히(?) 들어보셨을 것이라 예상되는 이 라이브러리는 prototype이나 ExtJs, Dojo 등과 유사한 스크립트 라이브러리 혹은 스크립트 프레임워크라고 보시면 됩니다. 이는 리치 웹, Ajax의 진화와 함께 요즘의 트렌드에 맞춰 개량된 신예 라이브러리인데요. 업계 선두이자 전설인 prototype 라이브러리를 제치고 세계적으로 가장 많이 사용되는 라이브러리로 자리를 잡고 있습니다. 2008년 후반에 이미 사용률이 60%에 가까웠죠. http://www.rubyrailways.com/rails-rumble-observations-part-i-jquery-on-the-heels-of-prototype/가 보시면 그 내용을 확인하실 수 있습니다. 더 최근의 자료는 제 검색 능력이 후덜덜이라 찾을 수가 없었습니다만, 이미 70%를 넘어섰다는 이야기도 얼마 전에 들었습니다. 사실, prototype도 여전히 괜찮은 라이브러리이긴 합니다만, 최근의 추세는 jQuery쪽 손을 들어주고 있는 편입니다. 이에 관해서는 다음 글을 한번 읽어보시기 바랍니다. http://www.quarkruby.com/2007/11/6/why-i-moved-from-prototype-to-jquery. 물론, 이러한 스크립트 라이브러리 혹은 프레임워크는 지극히 개발자의 개인 취향이나 팀 취향에 따라 호감도가 다르기에 이견이 있을 수 있습니다만, 요즘의 추세가 확실히 jQuery인 것은 분명해 보입니다. 수 많은 사이트에서 [소스 보기]를 해보면 jQuery 코드를 쉽게 볼 수 있기 때문이지요. 그리고, 실제로 이를 써 보면 그 매력에 반하게 되기도 하고요. 아참. 방금 위의 링크는 영어 원문인데요. “Why I moved from Prototype to jQuery”라는 제목으로 구글 검색을 해보면, 이 글을 번역해 놓은 블로그 글도 보실 수 있습니다. 게다가, 2008년 9월에는 Microsoft가 공식적으로 JQuery의 유용성을 인정하고, 차기 Visual Studio에서는 jQuery를 MIT 라이선스(http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt)인 상태로 포함시킬 것임을 발표하기도 했습니다. 게다가, jQuery에 대한 인텔리센스도 제공할 것이며 ASP.NET AJAX에서도 긴밀하게 사용될 것임을 발표하여 jQuery에 더욱 큰 힘을 실어주기도 했죠. 그래서인지, 최근의 외국 웹 사이트를 보면 대부분의 스크립트들이 jQuery로 구현되어 있는 것을 심심찮게 볼 수 있습니다. 이 말은 결국 앞으로 웹 개발을 하는 개발자들은 jQuery에 대한 지식을 미리 갖출 경우, 더욱 경쟁력 있는 개발자로 설 수 있을 것임을 의미하기도 합니다. jQuery를 다룰 줄 안다면 경쟁력이 있다는 이야기는 제 개인적인 생각이 아니라 실제로 외국 구직 사이트에 올라온 통계를 토대로 드린 말씀입니다. 다음 그림을 살펴보시기 바랍니다. 출처는 http://www.indeed.com/jobtrends?q=jquery%2C+dojo%2C+yui 입니다. jquery, dojo, yui Job Trends jquery jobs - dojo jobs - yui jobs 네. 뭐 일단 떡밥은 충분히 던져진 것 같다는 생각이 듭니다(최근의 온라인 유머 스타일을 따라한 것이니 ‘떡밥’이라는 단어에 오해하시고 기분 나빠하지 않으셨으면 합니다). jQuery의 위상 및 사용율이 크게 올라감에 따라, 차기 웹 애플리케이션의 개발 구도도 아마 ASP.NET MVC + jQuery의 조합 형태가 되지 않을까 하는 생각을 해 봅니다. 물론, WebForm 기반의 개발이 아예 사라질 것은 아니기에, 그러한 경우에는 ASP.NET이 기본적인 UI 골격을 렌더링하는 역할을 담당하면서 jQuery와 WCF(혹은 웹 서비스)로 연동되는 아키텍처도 고려해 볼만 합니다. 이는 기존 개발 스타일을 유지하면서 점진적으로 MVC로 옮겨갈 수 있다는 장점이 있겠죠(사실, Ajax가 일반화되고, jQuery가 득세하면서 ASP.NET 서버 컨트롤의 필요성은 갈수록 줄어들고 있는 것이 사실이니까요). Case 1. jQuery + ASP.NET MVC Case 2. jQuery + ASP.NET WebForm(UI 렌더링) + WCF(혹은 웹 서비스) 서론이 길었는데요. 그래서 하고 싶은 말은 이러한 jQuery에 대해서 작게나마 강좌를 진행해볼까 한다는 것입니다. 아주 상세한 내용은 IT의 경기를 살리기 위해서라도 “책을 사서” 보실 것을 권장하고요. 제 강좌는 jQuery의 유용함과 초급 사용법 정도에 초점을 두고 2~3회 정도로 진행을 해볼까 합니다. 아직 이전 강좌인 예외처리 기법에 대한 강좌도 마무리를 못한 상태라서요 ^^; 그럼 다음 강좌부터 본격적으로 시작해 봅니다.

authored by Taeyo