메모장
[JQuery] bPopup reposition - bPopup 재 정렬하기 본문
Jquery에서 팝업창을 생성할 때 bPopup이라는 기능으로 손쉽게 팝업을 생성할 수 있다.
bPopup을 통해서 화면에 팝업창을 화면에 예쁘게 생성할 수 있는데 이번 글에서는 bPopup의 reposition기능에 대해 소개해보겠다.
이번에 reposition 기능을 사용하게 된 계기는 bPopup으로 창을 띄웠을떄 유동적으로 창의 크기를 변경해야 할 때가 있는데 bPopup으로 생성된 창의 크기가 달라지면 늘어난 크기에 맞게 자동으로 예쁘게 정렬되지 않는다.
해서 bPopup으로 생성된 창이 변경되었을 때 창이 자동으로 변경되도록 하기 위해서 reposition 기능을 사용했다.
이제 사용법에 대해서 설명해 볼텐데 bPopup 기본 사용법 관련해서는 이미 많은 블로그에서 다뤄왔기 떄문에 가볍게 패스.
<reposition 사용법>
기본적으로 bPopup 오브젝트를 생성할때 그냥 바로 생성을 해버리는데
//예시 $('#target').bPopup({ //옵션은 패스 });
이렇게 그냥 생성하지 말고 변수에 담아놓는다.
var bpopup = $('#target').bPopup({ //옵션은 패스 });
이후 창의 크기가 변경되었을떄
//width 또는 height는 알아서 변경 //예시 $('#target').height(1000); //이후 reposition 실행 bpopup.reposition(500);
단 한 줄의 코드가 추가됨으로써 하고자했던 창 크기 변경 시 창 위치 자동 변경이 완료되었다.
관련 documentation을 찾아보았으나 영어에 문외한이라 저 안에 들어가는 숫자에 대해서 임의의 값을 넣어서 테스트 해본 결과
1. 저 숫자는 밀리 세컨드 단위인 것으로 보임.(거의 확실)
2. setTimeout처럼 대기했다가 쨘 하고 바뀌는게 아니라 저 지정된 시간만큼 애니메이션 기법으로 스르르 창이 옮겨진다.
이렇게 된다.
애초에 bPopup을 생성할때 무언가의 옵션으로 알아서 자동으로 정렬되게 할 수도 있을거 같지만 더 이상 검색하고 싶은 의지가 없으니 이 한 줄로 패스.
기본으로 제공되는 기능을 사용하면 몸과 마음이 너무 편안하다.
이정도면 내 말주변을 최대한 활용해서 설명 잘 한듯.
끝.
'JavaScript & JQuery' 카테고리의 다른 글
[JQuery] JQuery animation - JQuery로 애니메이션 효과를 주기 (0) | 2018.05.10 |
---|---|
[JavaScript & Jquery] json 데이터 읽는법 (0) | 2017.10.17 |
자바스크립트 정규식 (0) | 2016.10.20 |