jQuery UI Datepicker 사용자 정의 및 개발 방법
jQuery UI는 사용하기 쉽기 때문에 단순히 멋지고 대화 형 기능이 필요한 거의 모든 웹 사이트에서 널리 사용됩니다.
이 게시물에서는 제공된 기능 중 하나 인 Datepicker 위젯을 살펴 보겠습니다..
캘린더 테마를 사용자 정의하는 방법을 배우므로 전체 디자인에 해당하는 고유 한 테마를 만들 수 있습니다. 그러나이 자습서를 수행하기 전에 JavaScript 및 CSS에 대한 지식이 필요합니다..
- 데모
- 소스 다운로드
준비가 되었다면 시작하십시오..
자산
달력에 필요한 필수 자산을 준비해 봅시다..
첫째, 달력 디자인은 Premium Pixels의이 PSD 파일을 참조합니다. 그래서 우리는 우리가 필요로하는 색상 샘플을 얻을 수 있도록 먼저 다운로드하는 것이 좋습니다. 그런 다음 두 가지 패턴을 다운로드하십시오. 교활한 패턴 우리는 달력의 배경으로 사용할 것입니다. 이 예에서는 검은 색 데님과 짙은 색 가죽을 사용하기로 결정했습니다..
jQuery UI로 생성 된 요소 클래스 / ID를 검사하려면 Firebug와 같은 웹 개발 도구가 필요합니다..
글쎄, 우리는 충분한 준비가되어 있다고 생각해. 이제 첫 번째 단계로 가자..
1 단계 : jQuery UI Datepicker
먼저, jQuery UI 다운로드 페이지로 이동하십시오. 이 페이지에서 다음과 같은 몇 가지 옵션이 제공됩니다. UI 핵심, 위젯, 상호 작용 및 효과.
우리는해야한다. 모든 구성 요소 선택 취소, 우리 모두가 필요하지 않기 때문에.
그런 다음 위젯 섹션에서 만 datepicker를 선택하십시오. jQuery UI는 필수 종속성을 자동으로 선택하고 다운로드 파일.
다운로드 한 모든 파일 링크 - CSS를 제외하고 - HTML 빈 문서에 다음과 같이 입력하십시오.
2 단계 : Datepicker 사용자 정의
이 단계에서는 다음 옵션을 사용하여 datepicker를 구성합니다..
위의 코드는 jQuery가 엘리먼트에 캘린더를 표시하도록 지시한다. 날짜 선택기 신분증. 그래서 우리는 다음을 넣어야합니다. div - 날짜 피커 ID가있는 태그 - 본문 섹션에 달력을 만듭니다.
이제 캘린더가 이미 생성되어이 형식으로 나타나야하며 스타일이없는 일반 형식이지만 여전히 기능이 있습니다..
3 단계 : 스타일
이제 달력의 스타일을 시작해 보겠습니다. 평소와 같이 모든 요소를 정규화하고 새 스타일 시트를 만드는 것으로 시작하겠습니다.이 예제에서는 이름을 지정합니다 datepicker.css. 그런 다음 모두 HTML 문서에 연결하십시오..
그런 다음 HTML을 너무 단순하게 보이지 않도록 먼저 배경을 몸에 첨부합니다..
body background : url ( '... /img/darkdenim3.png') 반복 0 0 # 555;
다음으로, 우리는 날짜 피커의 너비를 지정하고, 중앙에 위치시키고, 그림자를 추가하여 달력에 prominece 효과를 부여합니다.
.ui-datepicker (너비 : 216px; 높이 : 자동; 여백 : 5px 자동 0; 글꼴 : 9pt Arial, sans-serif; -webkit-box-shadow : 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-shadow : 0px 0px 10px 0px rgba (0, 0, 0, .5); 상자 그림자 : 0px 0px 10px 0px rgba (0, 0, 0, 0.5);
모든 앵커 태그에서 기본 밑줄 장식을 제거합니다..
.ui-datepicker a 텍스트 장식 : 없음;
jQuery UI의 캘린더에는 표. 그래서, 추가하자. 100 % 너비 표, 위의 래퍼와 동일한 최대 너비를 갖습니다. 그건 216px
.ui-datepicker 테이블 (너비 : 100 %;
머리말 섹션 스타일 지정하기
datepicker에는 다음을 포함하는 헤더 섹션이 있습니다. 월 및 연도 달력의 이 섹션에는 이전에 다운로드 한 짙은 색의 가죽 질감이 약간 흰 색으로 나타납니다. 1px 상단에 흰색 그림자.
.ui-datepicker-header background : url ( '... /img/dark_leather.png') 반복 0 0 # 000; color : # e0e0e0; font-weight : bold; -webkit-box-shadow : 인 세트 0px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow : 삽 입율 0px 1px 1px rgba (250, 250, 250, .2); box-shadow : 인 세트 0px 1px 1px rgba (250, 250, 250, .2); 텍스트 그림자 : 1px -1px 0px # 000; 필터 : dropshadow (color = # 000, offx = 1, offy = -1); 줄 높이 : 30px; border-width : 1px 0 0 0; border-style : 솔리드; 테두리 색상 : # 111;
다음으로 달 위치.
.ui-datepicker-title 텍스트 정렬 : 센터;
교체 다음 것 과 예전의 PSD에서 슬라이스 된 스프라이트 화살표 이미지가있는 텍스트.
.ui-datepicker-prev, .ui-datepicker-next 디스플레이 : 인라인 블록; 너비 : 30px; 높이 : 30px; 텍스트 정렬 : 가운데; 커서 : 포인터; background-image : url ( '... /img/arrow.png'); background-repeat : no-repeat; 라인 높이 : 600 %; 오버플로 : 숨김;
그런 다음 화살표 위치를 각각 조정하십시오..
.ui-datepicker-prev 부동 : 왼쪽; 배경 위치 : 센터 -30px; .ui-datepicker-next float : right; 배경 위치 : 센터 0px;
동안 요일 이름 섹션이 Thead, 우리의 디자인 참조를 기반으로, 그것은 약간 흰 그라디언트가됩니다. 그리고 작업을 단순화하기 위해이 도구를 사용하여 그라디언트 코드를 생성합니다.
.ui-datepicker thead 배경색 : # f7f7f7; background-image : -moz-linear-gradient (맨 위, # f7f7f7 0 %, # f1f1f1 100 %); background-image : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, # f7f7f7), 컬러 스톱 (100 %, # f1f1f1)); background-image : -webkit-linear-gradient (맨 위, # f7f7f7 0 %, # f1f1f1 100 %); background-image : -o-linear-gradient (맨 위, # f7f7f7 0 %, # f1f1f1 100 %); 배경 이미지 : -ms-linear-gradient (맨 위, # f7f7f7 0 %, # f1f1f1 100 %); 배경 이미지 : 선형 그래디언트 (맨 위, # f7f7f7 0 %, # f1f1f1 100 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); 테두리 아래 : 1 픽셀 단색 #bbb;
그만큼 요일 이름 텍스트는 짙은 회색의 색상을 갖습니다. # 666666 그리고 그들은 또한 얇은 흰색을 가질 것이다. 텍스트 그림자 누르는 효과를주기 위해.
.ui-datepicker th 텍스트 변환 : 대문자; font-size : 6pt; 패딩 : 5px 0; color : # 666666; 텍스트 그림자 : 1px 0px 0px #fff; 필터 : dropshadow (color = # fff, offx = 1, offy = 0);
이 시점에서 달력은 다음과 같이 나타납니다.
날짜 스타일 지정하기
달력 날짜가 td 또는 테이블 데이터. 따라서 패딩을 다음과 같이 설정합니다. 0 사이의 공백을 없애기 위해 td 1 픽셀의 오른쪽 테두리를 지정합니다..
.ui-datepicker tbody td 패딩 : 0; 테두리 오른쪽 : 1 픽셀 단색 #bbb;
마지막을 제외하고 td, 오른쪽 테두리가 없을 겁니다. 우리는 이것을 위해 오른쪽 테두리를 0으로 설정했습니다..
.ui-datepicker tbody td : 마지막 자식 border-right : 0px;
테이블 행은 거의 동일합니다. 마지막 행을 제외하고 1px 테두리 아래에 표시됩니다..
.ui-datepicker tbody tr border-bottom : 1px solid #bbb; .ui-datepicker tbody tr : 마지막 자식 border-bottom : 0px;
기본, 호버 및 활성 상태 스타일 지정
이 단계에서는 날짜 가리 키기와 활성 스타일을 정의합니다. 먼저 차원을 지정하여 날짜 기본 상태를 정의합니다. 날짜 텍스트 위치를 가운데에 배치하고 그라디언트 색상과 내부 흰색 그림자를 추가합니다..
.ui-datepicker td 스팬, .ui-datepicker td a display : 인라인 블록; font-weight : bold; 텍스트 정렬 : 가운데; 너비 : 30px; 높이 : 30px; 줄 높이 : 30px; color : # 666666; 텍스트 그림자 : 1px 1px 0px #fff; 필터 : dropshadow (color = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default background : #ededed; 배경 : -moz-linear-gradient (상단, #ededed 0 %, #dedede 100 %); 배경 : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, # ededed), 컬러 스톱 (100 %, # dedede)); 배경 : -webkit-linear-gradient (상단, #ededed 0 %, # dedede 100 %); 배경 : -o-linear-gradient (상단, #ededed 0 %, # dedede 100 %); 배경 : -ms-linear-gradient (맨 위, #ededed 0 %, # dedede 100 %); 배경 : 선형 그래디언트 (위쪽, #ededed 0 %, # dedede 100 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow : 인세 트 1px 1px 0px rgba (250, 250, 250, .5); -moz-box-shadow : 인세 트 1px 1px 0px rgba (250, 250, 250, .5); 상자 그림자 : 인세 트 1px 1px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default background : # f4f4f4; color : # b4b3b3;
날짜 위로 마우스를 가져 가면 약간 흰색으로 바뀝니다..
.ui-datepicker-calendar .ui-state-hover 배경 : # f7f7f7;
날짜가 활성 상태이면 다음 스타일을 갖습니다..
.ui-datepicker-calendar .ui-state-active background : # 6eafbf; -webkit-box-shadow : 인 세트 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow : 인 세트 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow : 인 세트 0px 0px 10px 0px rgba (0, 0, 0, .1); color : # e0e0e0; 텍스트 그림자 : 0px 1px 0px # 4d7a85; 필터 : dropshadow (color = # 4d7a85, offx = 0, offy = 1); 국경 : 1 픽셀 고체 # 55838f; 위치 : 상대적; 여백 : -1px;
이제 달력이 훨씬 좋아 보일 것입니다..
위치 고정
이 시점에서 날짜를주의 깊게 살펴보십시오. 첫 번째 열 또는 마지막 열에서 날짜를 클릭하면 달력 가장자리에서 한 픽셀 씩 오버플로되는 활성 상태.
그래서 여기에서 우리는 약간의 수정을 할 것입니다..
먼저 날짜의 너비를 29px, 마지막 열의 오른쪽 여백과 첫 번째 열의 왼쪽 여백을 0 그 반대의 -1px 이전에 활성 상태로 설정 한 마진.
.ui-datepicker-calendar td : 첫 번째 자식 .ui-state-active width : 29px; margin-left : 0; .ui-datepicker-calendar td : 마지막 자식 .ui-state-active width : 29px; margin-right : 0;
달력 마지막 행의 날짜도 비슷한 처리를합니다..
.ui-datepicker-calendar tr : 마지막 자식 .ui-state-active height : 29px; margin-bottom : 0;
자, 결과를 보자. 글쎄, 캘린더는 이제 아름답게 보이고 우리의 디자인 참조로 완벽하게 맞습니다. 그리고 데모를보고 소스를 다운로드하여 이미지 아래의 링크에서 코드를 검사 할 수 있습니다..
- 데모
- 소스 다운로드
보너스 : 캘린더 연장
자, 오늘 우리는 jQuery UI Datepicker에 대한 커스텀 테마를 만드는 방법에 대해 많은 것을 배웠습니다. 그러나이 데이트 피커에서 연장 할 수있는 것들이 많이 있기 때문에 여기서 멈추지 말아야합니다. 귀하의 jQuery와 CSS 숙련도에 따라 달력을 다음과 같이 확장 할 수 있습니다 - 오버레이 날짜 피커가있는 텍스트 입력.
- 데모
- 소스 다운로드
더 읽을 거리
jQuery UI에 대한 추가 정보. 여기에서 전체 설명서를 읽을 수 있습니다.
- jQuery UI 시작하기
- Theming jquery UI
- jQuery UI : Theming API 클래스
마지막 생각들
이 튜토리얼을 읽고 따라 주셔서 감사합니다. 유용하다고 생각하길 바랍니다. 그리고 의견이 있거나이 튜토리얼에서 빠뜨릴 수있는 사항을 추가하고 싶다면 아래의 주석 섹션을 참조하십시오. 고마워요 (다시).
