위젯의 열고닫는 시각적효과 - hide, show, animate
1. 정의
- 매개변수에 따라 위젯의 표시/감춤 효과를 줄 때 사용
1) 위젯의 종류
- Accordion(animate)
- Dialog(show, hide)
- Tabs(show, hide)
- Tooltip(show, hide)
2. show/hide/animate 매개변수 값
데이터형 |
개요 |
Boolean |
효과를 유효로 할지 |
Number |
재생 시간 |
String |
Easing의 이름 |
- Object
키 이름 |
개요 |
effect |
효과의 이름(accordion x) |
easing |
Easing이름 |
duration |
재생시간 |
delay |
지연 시간(accordion x) |
3. 예제
<!DOCTYPE html><head><meta charset="UTF-8" /><title>jQuery UI</title><link rel="stylesheet"</head><button id="btn">down</button><div id="dialog" > <p> You can download here </p> </div><script>$(function() { $('#dialog').dialog({ width: 500, height: 400, modal: false, autoopen:false, show:{effect:'slide',duration:800}, hide : 1000, buttons: { 'down': function() { location.href = '#'; }, 'close': function() { $(this).dialog('close'); } }, position: { of : '#btn', at: 'right bottom', my: 'left top' } }); $('#btn').click(function() { $('#dialog').dialog('open'); });});</script>
- 나올 떄 슬라이드 처럼 나오고 사라질 때 페이드아웃 효과
'Front-End > jQueryUI' 카테고리의 다른 글
| [jQueryUI] 간단한 탭 패널 구현 (0) | 2017.01.19 |
|---|---|
| [jQueryUI] 간단한 아코디언 패널 구현 (0) | 2017.01.19 |
| [jQueryUI] 위젯위치 제어 - position 매개변수 (0) | 2017.01.18 |
| [jQueryUI] jQueryUI 표준 아이콘 세트 이용하기 (0) | 2017.01.16 |
| [jQueryUI] jQueryUI 이용 방법 (0) | 2017.01.16 |
리딩리드