jQuery Multi Select Box (doubleSelect) Plugin

plugins/Forms 2009. 7. 2. 22:39


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

Full Source 

jquery.doubleSelect_0.zip


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);     
});

'plugins > Forms' 카테고리의 다른 글

jQuery 3 State Switch Plugin  (0) 2009.07.07
Posted by 바람이불면
,

Absolutize for jQuery

plugins/DOM 2009. 7. 1. 10:58

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;
 
  });
}










Posted by 바람이불면
,

jQuery

jquery 시작 2009. 6. 30. 16:31


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 - 출처 : TAEYO (taeyo.net)  (0) 2009.06.30
jQuery : 폼 필터 및 조작 메서드(each 등) - 출처 : TAEYO (taeyo.net)  (0) 2009.06.30
jQuery : 탐색(Traversing) 메서드 - 출처 : TAEYO (taeyo.net)  (0) 2009.06.30
jQuery : 조작(Manipulation) 메서드 - 출처 : TAEYO (taeyo.net)  (0) 2009.06.30
jQuery 셀렉터 : 필터 사용하기 - 출처 : TAEYO (taeyo.net)  (0) 2009.06.30
Posted by 바람이불면
,

티스토리툴바