[송규남의 IT 다이어리] 제이쿼리(jQuery) 열세번째 이야기
강소라
view : 865
제이쿼리(jQuery) UI 위젯 "다이얼로그(Dialog)"를 활용한 일정 만드는 법 강의
안녕하세요?
중앙HTA강사 송규남입니다.
이번 강좌에서는 지난 강좌에 이어 계속 jQuery에서 제공하는 UI에 대해서 알아보겠습니다.
jQuery UI 위젯의 다양한 기능들 속에서 그 중에 다이얼로그(Dialog)에 대한 활용 방법을 살펴볼껀데요.
먼저 jQuery UI 위젯의 다이얼로그(Dialog)를 다운받아야 겠죠?
다이얼로그(Dialog)를 다운 받기 위해~ "http://jqueryui.com/dialog/" 사이트로 로 접속하면
오른쪽 위젯 메뉴중에 Dialog(다이얼로그)가 있습니다.
먼저 jQuery UI 위젯중에서 다이얼로그(Dialog)가 있는데요. http://jqueryui.com/dialog/ 로 접속하면
오른쪽 위젯 메뉴중에 Dialog(다이얼로그)가 있습니다.
다이얼로그기능을 만들려면 다이얼로그(Dialog)로 보여질 div를 작성후 dialog(다이얼로그)
함수를 이용해서 다이얼로그로 변환시켜 주면 되는데요..
일단 왼쪽 Dialog(다이얼로그)메뉴를 클릭하면 샘플코드랑 실행결과가 있습니다.
샘플코드를 보면 다이얼로그(Dialog)를 아주 간단히 만들수 있다는 것을 알수 있습니다.
코드를 보면,다이얼로그(Dialog)로 보여질 div를 생성후 jQuey코드에서 dailog()함수를 사용해서 간단하게 다이얼로그(Dialog)로 만들었습니다.
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
===> 다이얼로그(Dialog)로 보여질 div만들기
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
==> 자바스크립트에서 div를 다이얼로그(Dialog)로 만들기
위의 사용방법을 토대로 간단한 다이얼로그 (Dialog)를 사용한 예제를 만들어 보겠습니다.
먼저 실행결과는 아래와 같은데요.
일정생성 버튼을 클릭하면 일정을 등록하기 위한 다이얼로그(Dialog)가 보여지고
해당 정보를 입력후 저장버튼을 누르면 모임일정에 추가되도록 만들어 보겠습니다.
지난시간에 했던대로 아래와 같이 파일이 해당 위치에 존재하도록 합니다.
다이얼로그(Dialog)가 처음부터 보여지지 않고 버튼을 눌렀을때 보여야 합니다.
아래처럼 다이얼로그(Dialog)를 만들면 자동열기가 실행되지 않아 다이얼로그(Dialog)가 보여지지 않게 됩니다.
$("#dlg").dialog({ autoOpen:false});
일정등록버튼을 누르면 다이얼로그(Dialog)가 보여지도록 해야하는데 이때는 아래와 같이 작성하면 됩니다.
$("#dlg").dialog("open");//다이얼로그열기
<script type="text/javascript">
$(function(){
//일정생성 버튼을 누르면 다이얼로그(Dialog)가 보이도록 함.
$("#btn1").click(function(){
$("#dlg").dialog("open");//다이얼로그열기
});
$("#dlg").dialog({
autoOpen:false, //처음실행시에 다이얼로그(Dialog) 안보이게하기.
buttons:{ //다이얼로그에 붙여질 버튼만들기
추가:function(){
//입력된 값들을 모임일정이 보여지는 div(#list) 에 추가되도록 합니다.
var ename=$("#ename").val();
var edate=$("#edate").val();
$("#list").append(ename +":" + edate +"<br>");
$("#ename").val("");
$("#edate").val("");
$("#ename").focus();
},
닫기:function(){
$(this).dialog("close");//다이얼로그 닫기
}
}
});
$("#edate").datepicker({
dateFormat:'yy/mm/dd'
});
});
</script>
</head>
<body>
<button id="btn1">일정생성</button>
<div id="list" style="width:500px;">
<h3>모임일정</h3>
</div>
<div id="box"><!-- 다이얼로그로 보여질 DIV 작성 -->
<div id="dlg" title="일정">
<h1>일정정보입력</h1>
<label for="ename">일정이름</label>
<input type="text" id="ename">
<label for="edate">일정날짜</label>
<input type="text" id="edate">
</div>
</div>
</body>
</html>
잘 작동되시나요?
jQuery(제이쿼리) UI에는 많은 편리한 위젯들이 제공됩니다.
UI페이지에 메뉴들을 하나씩 클릭하면서
실행코드를 보면 어렵지 않게 위젯들을 사용할 있습니다.
예를 들면 이와 같은 경우는 스마트폰으로 보여지는 웹페이지에서 radio 나 checkbox같은
요소들은 선택하기가 조금 불편하죠.
그런경우 Checkboxradio 위젯을 사용해서 아래처럼 요소들의 모양을 바꿀수 있습니다.
소스코드는 아래와 같습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
$( "input" ).checkboxradio();
} );
</script>
</head>
<body>
<div class="widget">
<h>Checkbox and radio button widgets</h1>
<h2>Radio Group</h2>
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
<h2>Checkbox</h2>
<fieldset>
<legend>Hotel Ratings: </legend>
<label for="checkbox-1">2 Star</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-2">3 Star</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-3">4 Star</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3">
<label for="checkbox-4">5 Star</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4">
</fieldset>
</div>
</body>
</html>
이렇게 하나하나 소스를 보면서 따라해 보면 위젯들을 사용해 훨씬 세련된 웹페이지를 만들수 있겠네요.
그럼 이번강좌는 여기서 마무리하겠습니다. 다음 강좌에서 뵈요 *^^*
저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
