Jquery UI

Open source/Javascript, Jquery, CSS 2015. 7. 12. 23:03

안녕하세요. 명월입니다.
이전 포스팅에서는 Jquery와 Css에 대해서 공부했습니다..
그러면 지금부터는 Jquery에서 제공하는 API에 대해서 공부하겠습니다.
Jquery – UI : 링크

Jquery UI

Jquery UI는 기본적으로 웹에서 제공하는 Input태그는 물론 프로그래스바, 팝업, 슬라이드 메뉴 등을 제공합니다.
사용자가 Css와 Jquery를 이용해서 제공하는 테마를 사용하지 않고 만들어서 사용할 수 있지만 오브젝트를 일일이 만들어서 사용하면 생산성도 많이 떨어지기 때문에 직접 만드는 것보다는 검정된 라이브러리를 사용하면 생산성을 올리고 품질을 좀 더 향상시켜서 개발할 수가 있습니다.

먼저 Jquery-UI 웹 페이지에 접속해서 Demos 탭 항목에 접근하여 Jquery-UI의 기능에 대해 좀 더 살펴 보겠습니다.

Jquery UI

실제, 사이트에 들어가 보면 확인 할 수 있는 항목이지만 스샷으로 확인하면 꽤 많은 기능이 제공되고 있다는 것을 볼 수 있습니다. 그러나 실제 개발시에는 모든 기능을 사용하지는 않고 특정 필요한 기능, 사양에 맞는 기능만 사용하는데 지금부터는 자주 사용하는 기능만 골라 공부 하겠습니다.

Datepicker

위 기능은 Datepicker로서 textbox를 클릭을 하면 달력이 표시되고 선택을 할 수 있는 기능 입니다. 이 Datepicker는 Jquery-UI를 이 Datepicker때문에 쓴다고 할 만큼 가장 많이 사용되는 기능입니다.
소스를 잠깐 살펴 보시면 input text에서 datepicker() 함수 호출로 사용할 수 있을 만큼 간단하게 작성이 가능합니다.

dialog

다음 기능은 Dialog입니다. 예전의 팝업은 javascript에서 window.open으로 많이 사용되었습니다. 그러나 window.open 팝업은 레이아웃 내의 처리가 아닌 브라우져의 팝업을 호출 함으로써 많은 문제점을 내포하고 있습니다. 그래서 최근에는 이런 window.open식의 팝업이 아닌 디자인도 가능한 레이어 팝업이 많이 사용하는 추세입니다.
그런 의미에서는 점점 많이 사용하게 되는 Jquery 기능입니다..

progres

다음 기능은 프로그래스바입니다. 비동기식의 처리의 상태를 확인 할 때 가장 많이 사용되는 모듈입니다. 예로 Ajax로 서버로 분할 업데이트를 할 때 많이 사용되겠습니다.

그 밖에도 Jquery는 많은 기능을 제공합니다만 이 포스트에서 전부 확인 하는 건 한계가 있으니 각자 홈페이지에 접속을 하셔서 확인 해 보실 바랍니다.
지금부터는 Jquery-UI를 다운로드 받아서 실제 적용하는 방법에 대해 공부하겠습니다. Download 탭으로 이동 하겠습니다.

Jquery download

Download 탭을 눌르면 위와 같은 형태의 웹 이미지가 열리게 됩니다. 웹 페이지의 내용을 읽어 보면 Jquery-UI의 기능을 선택적으로 커스텀 마이즈에서 모듈을 생성할 수 있다는 걸 알 수 있네요.
지금은 하나하나 따지면서 하기는 힘들고 그냥 전 기능을 포함하여 생성, 다운로드 하겠습니다.

Jquery download

Jquery–UI를 다운로드하면 압축 파일을 받을 수 있습니다. 압축을 푼 다음 프로젝트 경로에 복사하겠습니다.

Jquery install

복사를 하고 Html에서 소스를 작성,사용하겠습니다.

 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <script src="/lib/jquery-1.11.3.min.js"></script>
  <script src="/lib/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="/lib/jquery-ui-1.11.4.custom/jquery-ui.min.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p> 
</body>
</html>

먼저 head부분에 Jquery와 Jquery-UI를 선언을 하고 위에서 보았던 Datapicker 예제대로 작성하여 실행하겠습니다.

Jquery dataticker

웹 페이지를 열고 텍스트 박스에 마우스를 클릭하면 달력 팝업이 뜹니다. 다시 달력에서 날짜를 하나 선택을 하면 선택한 날짜가 텍스트 박스에 입력 되는 것을 확인 할 수 있습니다.

이번에는 버튼을 선언하여 다이알로그 팝업을 생성는 프로그램을 작성하겠습니다.

 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <script src="/lib/jquery-1.10.2.js"></script>
  <script src="/lib/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
  <link rel="stylesheet" href="/lib/jquery-ui-1.11.4.custom/jquery-ui.css">
  <script>
  var dialog;
  $(function() {
    $( "#datepicker" ).datepicker();
	dialog = $("#dialog").dialog({
		autoOpen: false,
		height:300,
		width:350,
		modal:true,
	});
  });
  $("input[type=button]").button().click(function(event){
	  dialog.dialog("open");
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
<div id="dialog" title="dialog">
  <p>Hello world</p>
</div>
<input type="button" value="click">
</body>
</html>

jquery UI result

click버튼을 누르면 위와 같이 다이아로그 팝업이 표시됩니다.

Jquery의 예제는 여기까지 확인 해 보고 그 외에도 Jquery UI 기능이 많이 있으니 확인 해 보시고 실제 개발할 때는 편리하게 사용하시면 되겠습니다. 그 외에 Demos에는 많은 기능들이 있었나 여기에 다 소개하기에는 내용이 너무 많고 각자 하나하나 만들어 보고 연습을 해 놓으면 나중에 개발할 때 도움이 되겠습니다.

'Open source > Javascript, Jquery, CSS' 카테고리의 다른 글

[Javascript] Select2 (Select searching, multiselect, ajax) (0)	2019.08.27
[Javascript] 날짜 포맷 설정하는 방법(moment 라이브러리) (0)	2019.08.22
[Javascript] 알람 메시지 라이브러리(toastr 라이브러리) (0)	2019.08.21
Google OAuth 사용법 (0)	2019.06.18
[CSS] 구글 폰트 (Google font) 이용하기 (0)	2019.05.31
JqGrid (0)	2015.07.14
Jquery Mobile (0)	2015.07.13
그래프 오픈 라이브러리 - JqPlot (2)	2012.09.16

Jquery UI

'Open source > Javascript, Jquery, CSS' 카테고리의 다른 글

최근에 올라온 글

티스토리툴바