[jQueryUI] AJAX를 이용한 비동기적 대화상자

Front-End/jQueryUI 2017. 1. 23. 19:36

AJAX를 이용한 비동기적 대화상자

- $.get()을 이용하여 비동기적으로 대화상자의 내용을 변경 한다

1. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dialog</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/> </head> <input class="open" data-path="dl" type="button" value="down"/> <input class="open" data-path="quest" type="button" value="flyer"/> <input class="open" data-path="help" type="button" value="question"/> <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(){ $('.open').click(function(){ var target = $(this); $.get(target.data('path')+'.html').done(function(data){ $('<div></div>').attr('title',target.val()).html(data).dialog({ width:500, height:400, modal:true }); }); }) ; }); </script>

- data-path를 이용하여 특정 파일의 html 을 호출 한다

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 툴팁으로 이미지 나오게 하기 (0)	2017.01.25
[jQueryUI] 간편한 툴팁구현 (0)	2017.01.25
[jQueyUI] 간단한 대화상자 구현 (0)	2017.01.19
[jQueryUI] 간단한 탭 패널 구현 (0)	2017.01.19
[jQueryUI] 간단한 아코디언 패널 구현 (0)	2017.01.19

리딩리드

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30