[JQuery] 10-2 제이쿼리 UI 플러그인 활용하기

제이쿼리 UI 플러그인 테마 다운받기

1. jqueryui 사이트 접속

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

2. Themes > Gallery > Download > 모든 옵션 선택 후 > 맨 아래 Download

3. 압축풀기 > js 파일은 js 폴더에 저장, css파일은 css폴더에 저장, img폴더도 css파일에 저장

제이쿼리 UI 플러그인 데모 코드 복사

1. Demos > Draggable > 맨 아래 코드 복사해서 Visual Studio 에 복사하기

2. script 태그와 link 태그 파일 경로 수정

- 소스 수정 ( 8번 줄 삭제, 7,12,13번째 줄 수정)

제이쿼리 UI 플러그인 데모 Datepicker 예제 연습

1. 소스 복사 및 파일 경로 수정

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="css/jquery-ui.min.css">
  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-5 JQuery' 카테고리의 다른 글

[JQuery] 10-3 bxSlider 플러그인 사용하기 (0)	2021.09.17
[JQuary] 10-1 제이쿼리 플러그인이란? (0)	2021.09.17
[JQuary] 9장 예비 (0)	2021.09.17
[JQuary] 09-2 제이쿼리 비동기 방식 연동 - Ajax 관련 메서드 (0)	2021.09.17
[JQuary] 09-1 제이쿼리 비동기 방식 연동 - Ajax (0)	2021.09.17