[jQuery UI] jQuery UI 소개 및 예제

2018. 2. 12. 00:14

1. jQuery UI 소개

jQuery UI는 jQuery를 이용해서 웹에서 필요한 동적인 움직임들을 구현하기 쉽게 만들어놓은 소스 창고와도 같습니다. 인터넷에서 단순하지만 동적으로 보이는 동작들은 실제로 구현하기에 굉장히 많은 노력이 필요합니다. 그러나 jQuery UI를 사용한다면 여러가지 동적인 기능들을 쉽게 쓸 수 있습니다. 부트스트랩과도 비슷한 역할입니다.

jQuery UI : https://jqueryui.com/

에서 확인할 수 있습니다. jQuery 처럼 다운받아서 사용할 수도 있고 CDN으로 사용할 수도 있습니다.

홈페이지에 들어가시면 종류별로 상세하게 설명되어 있습니다. 전 몇 가지만 살펴보도록 하겠습니다.

2. jQuery UI 예제

아코디언 예제

<script>
  $( function() {
    $( "#accord" ).accordion();
  } );
  </script>
</head>
<body>
 
<div id="accord">
  <h3>1번</h3>
  <div>
    <p>
1번 섹션입니다.
    </p>
  </div>
  <h3>2번</h3>
  <div>
    <p>
2번 섹션입니다.
    </p>
  </div>
  <h3>3번</h3>
  <div>
    <p>
3번 섹션입니다 
   </p>
    <ul>
      <li>아이템1</li>
      <li>아이템2</li>
    </ul>
  </div>
</div>
 
 
</body>
cs

조금 길지만 아코디언은 클릭하면 악기 아코디언처럼 늘어났다 줄어드는 동작을 말합니다.

그 다음은 jQuery로 동작할 수 있는 여러가지 effect에 대한 것입니다.

addClass와 removeClass

클래스를 더하거나 뺄 수 있습니다.

  $( function() {
    $( "#btn" ).on( "click", function() {
      $( "#target" ).addClass( "got-class", 3000, callback );
    });
 
    function callback() {
      setTimeout(function() {
        $( "#target" ).removeClass( "got-class" );
      }, 3000 );
    }
  } );
Colored by Color Scripter
cs

위 코드는 id값이 btn인 요소를 클릭하면 id값이 target인 요소에 got-class라는 클래스를 더하고 3초 후에 got-class라는 클래스를 제거하는 코드입니다. addClass의 두 번째 인자로 시간값을 지정해 줄 수 있습니다.

color Animation

색깔 애니메이션도 jQueryUI를 이용해 할 수 있습니다.

  $( function() {
    var value_save = true;
    $( "#btn" ).on( "click", function() {
      if ( value_save ) {
        $( "#target" ).animate({
          backgroundColor: "#aa0000",
        }, 2000 );
      } else {
        $( "#btn" ).animate({
          backgroundColor: "#fffeee",
        }, 3000 );
      }
      value_save = !value_save;
    });
  } );
Colored by Color Scripter
cs

#btn을 누르면 #target 에 animate 함수가 호출됩니다. 이 함수는 css 요소를 변경시킬 수 있습니다. 실제로 실행해보시면 #target의 css 요소가 변경됨을 알 수 있습니다. 전 backgroundColor 만을 변경시켰습니다. 그러나 너무 빠른 변경을 피하기 위해 시간 인자를 2000과 3000으로 주어서 그 시간동안 변경되게 했습니다. 마지막에 value_save 요소를 true와 false로 값을 다르게 함으로써 같은 애니메이션의 반복을 피합니다.

toggleClass

말 그대로 클래스가 있다면 없애고 없다면 부여하는 함수입니다. 소스코드는 다음과 같습니다.

  $( function() {
    $( "#btn" ).on( "click", function() {
      $( "#target" ).toggleClass( "got-class", 2000 );
    });
  } );
Colored by Color Scripter
cs

#btn을 누르면 #target의 클래스가 변합니다. 만약 'got-class' 클래스가 있다면 'got-class' 클래스가 제거되고 'got-class' 클래스가 없다면 'got-class' 클래스가 부여됩니다.

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery] ajax 통신 예제 (0)	2018.02.11
[jQuery] jQuery 설치 (0)	2018.02.11

개발 IT 헤딩