jQuery 정리 04

25 Feb 2019

Reading time ~2 minutes

jQuery 정리 04 - Effect, Plugin

Effect

효과, 보이거나 숨기기
- CSS로는 “display : none”으로 숨기고, “display:block” 또는 “display:inline”으로 보여줄 수 있다.
보이기

$("selector").show();

숨기기

$("selector").hide();

번갈아가며 보이기/숨기기
- 현재상태에 따라 보이거나 숨김
- show()와 hide()를 반복해서 수행

$("selector").toggle();

서서히 보이기

$("selector").fadeIn(ms);

서서히 숨기기

$("selector").fadeOut(ms);

Effect 사용 예

<div>
     <input type="button" value="보이기" class="btn"  id="show"/>
     <input type="button" value="숨기기" class="btn"  id="hide"/>
     <input type="button" value="보이기/숨기기" class="btn"  id="toggle"/>
     <input type="button" value="서서히 보이기" class="btn"  id="fadeIn"/>
     <input type="button" value="서서히 숨기기" class="btn"  id="fadeOut"/>
</div>
<div id="imgOutput">
     <img src="../common/images/img2.jpg"/>
</div>

#imgOutput { display:none; }

$(document).ready(function() {
     $("#show").click(function() {
           $("#imgOutput").show(); // 보이기
     });
     
     $("#hide").click(function() {
           $("#imgOutput").hide(); // 숨기기
     });
     
     $("#toggle").click(function() {
           $("#imgOutput").toggle(); // 보이기/숨기기
     });
     
     $("#fadeIn").click(function() {
           $("#imgOutput").fadeIn(1000); // 서서히 보이기
     });
     
     $("#fadeOut").click(function() {
           $("#imgOutput").fadeOut(3000); // 서서히 숨기기
     });
});

fadeIn과 fadeOut은 두번째 파라미터로 무기명 함수를 주면 함수 수행 후 무기명 함수를 호출가능
- 이미지가 사라지고 다른 이미지가 등장하는 등의 효과를 줄 수 있음

$("#fadeIn").click(function() {
     $("#imgOutput").fadeIn(1000, function() {
           // 보여지는 것이 완료되었을 때 처리할 코드
           alert("이미지 처리 완료");
     });
});

이펙트를 사용한 회원가입 검증

<div>
     <label>아이디</label>
     <input type="text" name="id" class="inputBox" id="id"  autofocus="autofocus"'/>
     <input type="button" value="중복확인" class="btn"  id="btnDup"/>
     <span id="idWarning"></span><br/>
     <input type="button" value="가입" class="btn"  id="btnJoin"/><br/>
</div>
<div id="imgOutput">
     <img src="../common/images/img2.jpg"/>
</div>

#idWarning { color:red; font-size:14px; font-weight: bold; }

////////////////// HTML Form Control의 값이 입력되지 않았을 때  ///////////////////////
$("#btnDup").click(function() {
     
});
$("#btnJoin").click(function() {
     var id = $("#id").val().trim();
     
     if (id == "") {
           // 1. idWarning 글자를 넣어서 보여준다.
           $("#idWarning").html("아이디는 필수 입력");

           for(var i=0; i<5; i++) {
               $("#idWarning").fadeIn(1000).fadeOut(1000);
           }
           // method체인으로 반복해서 Warning을 보여준다.

           /*var temp = [1000, 1000, 1000, 500, 500];
           $.each(temp, function(idx, ms){
               $("#idWarning").fadeIn(ms).fadeOut(ms);
           });*/
           // 배열과 jQuery 반복함수를 사용할 수도 있다.
           return;
     }
     
     alert("가입 페이지로 이동"); // 원래 $("폼태그id").submit(); 수행해야 함
});

slideDown(), slideUp() 사용 예

<div>
     <!-- 해당 텍스트를 클릭해서 이미지를 슬라이드업/다운으로 보여주기 -->
     <span id="txt">보이기</span>
</div>

#txt { cursor: pointer };

$("#txt").click(function() {
     var txt = $("#txt").text();
     
     if(txt=="보이기"){
           $("#txt").text("숨기기");
           $("#imgOutput").slideDown();
     }else{
           $("#txt").text("보이기");
           $("#imgOutput").slideUp();
     }
});

Plugin

jQuery 플러그인
다른 개발자들이 jQuery를 가지고 미리 구현해 놓은 기능들
Try a Demo를 통해 어떤 플러그인인지 확인하고 사용 가능
- 또는 플러그인 홈페이지에서 사용법을 확인 가능하다.
플러그인 사용 후 기록을 안하면 어떤 플러그인을 사용한지 확인이 어려우므로 주석을 달 것
플러그인을 지원하는 jQuery 버전이 다르기 때문에 위치에 주의한다.
- 가장 밑에 명시된 jQuery 버전이 적용된다.

플러그인 사용 예 - accordion

플러그인 페이지에 View Source를 보고 필요한 부분을 사용하여 자신의 코드에 적용시킨다.
accordion 플러그인

<!-- 복사해서 붙여넣은 내용, 아래부터는 jQuery 1.12.4이 적용된다.  -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#accordion" ).accordion();
} );
</script>
<script type="text/javascript">
</script>

<!-- CSS -->
<link rel="stylesheet"  href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div style="width:400px;">
<div id="accordion">
     <h3>1조 - PC방 통제</h3>
     <div>
           <p>
                기존의 PC방 관리 프로그램과 차별화를 둔 관리  프로그램으로, 기존 프로그램의 사용자 경험을
                제공하면서 좌석배치, 통계 등의 기능을  추가하여 PC방 사장님의 업무처리를 돕는 프로그램입니다.
                제발 사주세요. 굽신굽신 ㅇㄱㄴ
           </p>
     </div>
     <h3>2조 - 영화 예매 프로그램</h3>
           <div>
                <p>
                     이것은 영화 예매인가?
                </p>
           </div>
     <h3>3조 - 구인구직</h3>
     <div>
           <p>
                개발자만의 구인구직을 타겟으로한 버티컬 서비스로 모든 개발자가
                주 5일제(월화수목금금금)를 지향할 수  있도록....
           </p>
     </div>
</div>
</div>

jQuery