[jQueryUI] 위젯의 열고닫는 시각적효과

Front-End/jQueryUI

[jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate

리딩리드 2017. 1. 18. 17:57

위젯의 열고닫는 시각적효과 - 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" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> </head> <button id="btn">down</button> <div id="dialog" > <p> You can download here </p> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <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>

- 나올 떄 슬라이드 처럼 나오고 사라질 때 페이드아웃 효과