[송규남의 IT다이어리] 제이쿼리(jQuery) 열두번째 이야기

남지숙

2016-07-05 11:35:43

제이쿼리(jQuery) UI를 이용한 달력 만드는 방법 강좌

안녕하세요?

중앙HTA강사 송규남입니다.

이번 송규남의 IT다이어리에는 제이쿼리(jQuery)에서 제공하는 UI에 대해서 알아보겠습니다.

자바스크립트(Javascript)로 달력 등을 구현하려면 상당히 어려운데요.

제이쿼리(jQuery)에서는 달력, 다이, 드래그앤드롭 등 여러 UI에 관련된 많은 기능들이 지원되고 있습니다.

먼저 제이쿼리(jQuery) 홈페이지에서 UI관련 라이브러리를 다운받아야 하는데요..

<< http://www.jquery.com >>으로 접속하셔서 아래의 화살표방향에 있는 이미지를 클릭합니다.

링크된 페이지로 들어가서 아래의 화살표방향에 있는 stable버튼을 클릭해서 라이브러리를 다운받습니다.

다운로드 받은 zip파일을 압축을 풀고 images폴더와 jquery-ui.min.js, jquery-ui.css 파일을 선택해서 프로젝트의 해당위치에 넣습니다.

이클립스에서 프로젝트 생성 후 아래와 같이 파일을 위치하게 합니다.

- WebContent폴더에 html파일을 하나 작성 후 아래와 같이 파일을 포함 후 간단한 코드를 작성해 봅니다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$("#mydate").datepicker();

});

</script>

</head>

<body>

</body>

</html>

- 아래와 같이 웹브라우져로 실행해보면 달력이 화면에 나타나는 것을 볼 수 있습니다.

코드를 보면 아래의 사각형안에 있는 코드가 div에 달력을 표시하는 부분입니다.

달력을 나타내기 정말 쉽쥬~?^^

http://jqueryui.com/ 사이트에 들어가보면 jQuery UI가 제공하는 여러 기능들을 살펴볼 수 있고 Sample코드들이 제공되기 때문에 기능들을 쉽게 구현할 수 있습니다.

그럼 jQuery UI를 사용해서 아코디언기능을 구현해 보겠습니다.

html페이지를 하나 추가한후 아래와 같은 구조로 html을 작성합니다.

<h2>jQuery</h2>

<div>

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

</div>

<div>

What is CSS?

CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on screen, paper, or in other media

CSS saves a lot of work. It can control the layout of multiple web pages all at once

External stylesheets are stored in CSS files

</div>

<h2>Bootstrap</h2>

<div>

What is Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development

Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins

Bootstrap also gives you the ability to easily create responsive designs

</div>

- 아코디언으로 보여질 전체를 감싸는 div를 하나 주고 그안에 h태그와 div태그로 이루어지는 하나의 섹션으로 보여질 탭을 여러개 만듭니다.

여기에 jquery코드로 아코디언으로 보이게끔하는 코드를 추가합니다.

$(document).ready(function(){

$("#accordion").accordion();

});

</script>

- 아래와 같이 아코디언형태로 보이는 것을 확인할 수 있습니다.

사실 아코디언에 관련된 샘플코드가 있기 때문에 참고하고 보시면서 만드시면 되는데요..

http://jqueryui.com/ 사이트에 접속후 Widgets의 Accordion을 선택후 아래의 사각형으로 표시되어 있는 view source를 클릭하면 샘플코드를 확인할 수 있습니다.

텍스트 입력 창에도 쉽게 달력기능을 적용할 수 있는데요..

아래와 같이 코드를 작성합니다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$("#date1").datepicker();

});

</script>

</head>

<body>

날짜선택 <input type="text" id="date1"><br/>

</body>

</html>

==> 위의 코드는 text에 포커스가 오면 아래처럼 달력이 바로 보여져서 날짜를 선택할 수 있도록 합니다.

위의 달력은 요일이 영문으로 나오고 있습니다.

여러가지 달력을 나타내는데 옵션을 설정 할 수 있는데요 아래처럼 코드를 작성후 실행해 보세요.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$("#date1").datepicker({ // 달력에 옵션 설정하기

dayNamesMin:["일","월","화","수","목","금","토"], // 요일에 표시되는 형식 설정

dateFormat:"yy-mm-dd", //날짜 형식 설정

monthNames:["1월","2월","3월","4월","5월","6월","7월",

"8월","9월","10월","11월","12월"], //월표시 형식 설정

showOn:"button", //버튼 보이기

buttonText:"달력", //버튼에 보이는 텍스트설정

showAnim:"fold" //애니메이션효과

});

</script>

</head>

<body>

날짜선택 <input type="text" id="date1"><br/>

</body>

</html>

- 실행결과를 보면 아래와 같이 지정한 옵션대로 달력모양이 나타나는 것을 확인할 수 있습니다.

이번 강좌는 jQuery UI에 관련된 예제를 몇 개 해보았는데요.. 따라하기 어렵진 않으셨나요?

그럼 다음 강좌에서 다시 찾아뵐께요!

이전글[송규남의 IT 다이어리] 제이쿼리(jQuery) 열세번째 이야기2016.09.05
다음글[송규남의 IT다이어리] 제이쿼리(jQuery) 열한번째 이야기2016.05.24

A Column