●jQuery 및 CSS3를 사용하여 캘린더를 만드는 방법
이전
다음
링크
본문
●jQuery 및 CSS3를 사용하여 캘린더를 만드는 방법
![jQuery 및 CSS3를 사용하여 캘린더를 만드는 방법 [튜토리얼]](https://11q.kr/www/data/editor/2107/3232235521_BvqmTJCU_c533d50429ffc745da101a74a329ca1f41946804.png "jQuery 및 CSS3를 사용하여 캘린더를 만드는 방법 [튜토리얼]")
주제: jQuery 및 CSS3
난이도: 중급
예상 완료 시간: 30분
난이도: 중급
예상 완료 시간: 30분
이 튜토리얼에서는 Futurico UI Pro에서 찾을 수 있는 jQuery 및 CSS3 캘린더 를 코딩할 것입니다. 이를 위해 모든 스타일 지정에 CSS를 사용하고 "기능"에 대해 jQuery 및 jQuery UI를 사용 합니다. jQuery UI에서는 "Datepicker" 스크립트 만 사용합니다 . 따라서 jQuery UI에서 사용 가능한 모든 구성 요소를 다운로드할 필요가 없으며 파일 크기가 더 작아집니다.
1단계 – HTML 마크업
캘린더를 만들려면 ID가 있는 div 태그만 추가하면 됩니다.
1 | <div id="calendar"></div> |
그런 다음 body 닫는 태그 앞에 jQuery와 jQuery UI 스크립트를 추가해야 합니다.
또한 "datepicker" 를 호출해야 하므로 div에서 사용한 것과 동일한 ID를 사용해야 합니다. 또한 몇 가지 옵션을 추가할 것입니다. 인라인은 캘린더를 표시하므로 버튼이나 입력을 클릭할 필요가 없습니다. "월요일"을 달력의 첫 번째 날로 만들 려면 1로 설정해야 합니다. "다른 월 표시" 는 모든 테이블을 채우기 위해 다른 월 일을 추가합니다. 사용 가능한 모든 옵션에 대한 자세한 내용은 설명서를 참조하십시오 .
1 2 삼 4 5 6 7 8 9 10 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="js/jquery-ui-datepicker.min.js"></script><script> $('#calendar').datepicker({ |
관련자료
-
링크
-
이전
-
다음
댓글 0
등록된 댓글이 없습니다.