Cách tùy chỉnh và theo chủ đề jQuery UI Datepicker
Giao diện người dùng jQuery đơn giản là tuyệt vời và do dễ sử dụng, nó phổ biến và được sử dụng rộng rãi trong hầu hết mọi trang web cần các tính năng tương tác.
Và, trong bài đăng này, chúng tôi sẽ xem xét một trong những tính năng được cung cấp, tiện ích Datepicker.
Chúng tôi sẽ cố gắng tìm hiểu cách tùy chỉnh chủ đề lịch, để bạn có thể tạo chủ đề của riêng mình, tương ứng với thiết kế chung của bạn. Tuy nhiên, bạn cần có một chút hiểu biết về JavaScript và làm quen với CSS trước khi làm theo hướng dẫn này.
- Bản giới thiệu
- Tải xuống nguồn
Nếu bạn đã sẵn sàng, hãy bắt đầu.
Tài sản
Hãy chuẩn bị một số tài sản cần thiết cho lịch.
Đầu tiên, thiết kế lịch sẽ đề cập đến tệp PSD này từ Premium Pixels. Vì vậy, chúng tôi nên tải xuống trước để giúp chúng tôi lấy mẫu màu chúng tôi cần. Sau đó, tải xuống hai mẫu từ Tế nhị Mẫu mà chúng tôi sẽ sử dụng làm nền của lịch của chúng tôi. Trong ví dụ này, chúng tôi quyết định sử dụng các mẫu sau: denim đen và da tối màu.
Chúng tôi cũng sẽ cần một công cụ phát triển web như Fireorms để kiểm tra các lớp / id phần tử được tạo bởi UI UI.
Chà, tôi nghĩ chúng ta đã có sự chuẩn bị đầy đủ. Bây giờ chúng ta hãy đi đến bước đầu tiên.
Bước 1: Datepicker UI UI
Đầu tiên, hãy vào trang tải xuống UI UI. Trong trang này, bạn sẽ được trình bày với một vài lựa chọn, như sau; UI Core, Widgets, Tương tác và Hiệu ứng.
Chúng ta nên bỏ chọn tất cả các thành phần, vì chúng ta không cần tất cả chúng.
Sau đó, trong Widgets phần chỉ chọn datepicker. Giao diện người dùng jQuery sẽ tự động chọn các phụ thuộc thiết yếu và sau đó tải về tập tin.
Liên kết tất cả các tệp đã tải xuống - ngoại trừ CSS - vào tài liệu trống HTML của bạn, như sau:
Bước 2: Tùy chỉnh Datepicker
Trong bước này, chúng tôi sẽ cấu hình một máy đo ngày với các tùy chọn sau.
Đoạn mã trên sẽ hướng dẫn jQuery hiển thị lịch trên một phần tử với bảng chọn ngày ID. Vì vậy, chúng ta cần đặt như sau div thẻ có - ID ngày tháng - trong phần thân để tạo lịch:
Bây giờ lịch nên đã được tạo và xuất hiện như thế này, đơn giản mà không có bất kỳ kiểu nào, nhưng vẫn có chức năng.
Bước 3: Kiểu dáng
Bây giờ hãy bắt đầu tạo kiểu cho lịch. Chúng tôi sẽ bắt đầu bằng cách bình thường hóa tất cả các yếu tố - như thường lệ - và tạo một biểu định kiểu mới, trong ví dụ này tôi đặt tên cho nó datepicker.css. Sau đó liên kết tất cả chúng vào tài liệu HTML.
Sau đó, trước tiên chúng ta sẽ đính kèm một nền vào phần thân để HTML của chúng ta trông không quá đơn giản.
body nền: url ('Thẻ /img/darkdenim3.png') lặp lại 0 0 # 555; Tiếp theo, chúng tôi sẽ chỉ định chiều rộng của bộ đếm ngày, đặt nó vào giữa và thêm bóng thả để tạo hiệu ứng nổi bật cho lịch.
.ui-datepicker width: 216px; chiều cao: tự động; lề: 5px tự động 0; phông chữ: 9pt Arial, sans-serif; -webkit-box-bóng: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-bóng: 0px 0px 10px 0px rgba (0, 0, 0, .5); hộp bóng: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Chúng tôi cũng sẽ xóa trang trí gạch chân mặc định khỏi mọi thẻ neo.
.ui-datepicker a text-trang trí: none;
Lịch trong jQuery UI được hình thành với một bàn. Vì vậy, hãy thêm 100% chiều rộng cho bàn, do đó, nó sẽ có chiều rộng tối đa giống như trình bao bọc ở trên; đó là 216px
.bảng ui-datepicker chiều rộng: 100%;
Tạo kiểu cho phần Header
Datepicker có phần tiêu đề chứa Năm tháng của lịch. Phần này sẽ có kết cấu da sẫm màu mà chúng tôi đã tải xuống trước đây với màu phông hơi trắng và 1px bóng trắng ở trên cùng.
.ui-datepicker-header nền: url ('Mạnh /img/dark_leather.png') lặp lại 0 0 # 000; màu: # e0e0e0; font-weight: in đậm; -webkit-box-Shadow: in 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-bóng: in 0px 1px 1px 0px rgba (250, 250, 250, .2); hộp bóng: inet 0px 1px 1px 0px rgba (250, 250, 250, .2); bóng văn bản: 1px -1px 0px # 000; bộ lọc: dropshadow (color = # 000, offx = 1, offy = -1); chiều cao dòng: 30px; độ rộng đường viền: 1px 0 0 0; kiểu viền: chắc chắn; viền màu: # 111; Tiếp theo, hãy tập trung vào tháng Chức vụ.
.ui-datepicker-title text-align: centre;
Thay thế cái Kế tiếp và Trước đó văn bản với hình ảnh mũi tên sprite được cắt từ PSD.
.ui-datepicker-trước, .ui-datepicker-next display: inline-block; chiều rộng: 30px; chiều cao: 30px; văn bản-align: trung tâm; con trỏ: con trỏ; hình nền: url ('Thẻ /img/arrow.png'); lặp lại nền: không lặp lại; chiều cao dòng: 600%; tràn: ẩn; Sau đó, điều chỉnh vị trí mũi tên tương ứng.
.ui-datepicker-trước float: left; vị trí nền: trung tâm -30px; .ui-datepicker-next float: right; vị trí nền: trung tâm 0px;
Trong khi tên ngày phần được bọc trong một thead, dựa trên tài liệu tham khảo thiết kế của chúng tôi, nó sẽ có độ dốc hơi trắng. Và, để đơn giản hóa nhiệm vụ của chúng tôi, chúng tôi sẽ sử dụng công cụ này để tạo mã gradient:
.ui-datepicker thead nền-màu: # f7f7f7; hình nền: -moz-linear-gradient (trên cùng, # f7f7f7 0%, # f1f1f1 100%); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%, # f7f7f7), dừng màu (100%, # f1f1f1)); hình nền: -webkit-linear-gradient (trên cùng, # f7f7f7 0%, # f1f1f1 100%); hình nền: -o-linear-gradient (trên cùng, # f7f7f7 0%, # f1f1f1 100%); hình nền: -ms-linear-gradient (trên cùng, # f7f7f7 0%, # f1f1f1 100%); hình nền: tuyến tính-gradient (trên cùng, # f7f7f7 0%, # f1f1f1 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); viền dưới: 1px solid #bbb;
Các tên ngày văn bản sẽ có màu xám đậm của # 666666 và họ cũng sẽ có một màu trắng mỏng bóng văn bản để cho nó hiệu ứng ép.
.ui-datepicker th text-Transform: chữ hoa; cỡ chữ: 6pt; phần đệm: 5px 0; màu: # 666666; bóng văn bản: 1px 0px 0px #fff; bộ lọc: dropshadow (color = # fff, offx = 1, offy = 0);
Tại thời điểm này, lịch sẽ xuất hiện như thế này:
Tạo kiểu cho ngày
Ngày dương lịch được gói trong td hoặc dữ liệu bảng. Vì vậy, chúng tôi sẽ đặt phần đệm thành 0 để loại bỏ khoảng cách giữa td và cung cấp cho nó một biên giới bên phải của 1px.
.ui-datepicker tbody td padding: 0; viền phải: 1px solid #bbb;
Ngoại trừ cuối cùng td, mà sẽ không có biên giới bên phải. Chúng tôi đặt đường viền bên phải thành 0 cho điều này.
.ui-datepicker tbody td: last-child Border-right: 0px;
Các hàng của bảng sẽ gần như giống nhau. Nó sẽ có đáy viền 1px ngoại trừ hàng cuối cùng.
.ui-datepicker tbody tr Border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: last-child Border-bottom: 0px;
Tạo kiểu mặc định, trạng thái di chuột và trạng thái hoạt động
Trong bước này, chúng tôi sẽ xác định kiểu di chuột ngày và kiểu hoạt động. Trước tiên chúng tôi sẽ xác định trạng thái mặc định ngày bằng cách chỉ định kích thước; căn giữa vị trí văn bản ngày, thêm màu gradient và bóng trắng bên trong.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: in đậm; văn bản-align: trung tâm; chiều rộng: 30px; chiều cao: 30px; chiều cao dòng: 30px; màu: # 666666; bóng văn bản: 1px 1px 0px #fff; bộ lọc: dropshadow (color = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default nền: #ededed; nền: -moz-linear-gradient (trên cùng, #ededed 0%, #dedede 100%); nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%, # ededed), dừng màu (100%, # depede)); nền: -webkit-linear-gradient (trên cùng, #ededed 0%, # depede 100%); nền: -o-linear-gradient (trên cùng, #ededed 0%, # khấu trừ 100%); nền: -ms-linear-gradient (trên cùng, #ededed 0%, # khấu trừ 100%); nền: gradient tuyến tính (trên cùng, #ededed 0%, # khấu trừ 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# depede", GradientType = 0); -webkit-box-Shadow: in 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-bóng: in 1px 1px 0px 0px rgba (250, 250, 250, .5); box-Shadow: in 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-không thể chọn .ui-state-default nền: # f4f4f4; màu: # b4b3b3;
Khi bạn di chuột qua ngày, nó sẽ chuyển sang màu trắng hơi.
.ui-datepicker-calendar .ui-state-hover nền: # f7f7f7;
Khi ngày ở trạng thái hoạt động, nó sẽ có các kiểu sau.
.ui-datepicker-calendar .ui-state-active nền: # 6eafbf; -webkit-box-Shadow: in 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-bóng: in 0px 0px 10px 0px rgba (0, 0, 0, .1); hộp bóng: inet 0px 0px 10px 0px rgba (0, 0, 0, .1); màu: # e0e0e0; bóng văn bản: 0px 1px 0px # 4d7a85; bộ lọc: dropshadow (color = # 4d7a85, offx = 0, offy = 1); viền: 1px solid # 55838f; vị trí: tương đối; lề: -1px;
Bây giờ, lịch sẽ tốt hơn nhiều.
Sửa chữa vị trí
Tại thời điểm này, nhìn vào ngày cẩn thận. Khi bạn nhấp vào ngày ở cột đầu tiên hoặc cột cuối cùng, bạn sẽ thấy trạng thái hoạt động tràn một pixel ra khỏi cạnh lịch.
Vì vậy, ở đây, chúng tôi sẽ làm một số sửa chữa nhỏ.
Đầu tiên, chúng tôi sẽ giảm chiều rộng ngày xuống 29px, và đặt lề phải của cột cuối cùng và lề trái của cột đầu tiên thành 0 để đảo ngược -1px lề chúng ta đã đặt trước đó cho trạng thái hoạt động.
.ui-datepicker-calendar td: con đầu lòng .ui-state-active width: 29px; lề trái: 0; .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; lề phải: 0;
Ngày ở hàng cuối cùng của lịch cũng sẽ có cách xử lý tương tự.
.ui-datepicker-calendar tr: last-child .ui-state-active height: 29px; lề dưới: 0;
Bây giờ, hãy xem kết quả. Vâng, lịch bây giờ trông đẹp và phù hợp hoàn hảo như tài liệu tham khảo thiết kế của chúng tôi. Và, bạn có thể xem bản demo và tải xuống nguồn để kiểm tra mã từ các liên kết bên dưới hình ảnh.
- Bản giới thiệu
- Tải xuống nguồn
Phần thưởng: Mở rộng Lịch
Chà, hôm nay chúng ta đã học được khá nhiều về cách tạo một chủ đề tùy chỉnh cho Datepicker UI UI. Nhưng bạn không nên dừng lại ở đây, vì vẫn còn nhiều điều có thể được mở rộng từ trò chơi hẹn hò này. Tùy thuộc vào mức độ thành thạo jQuery và CSS của bạn, bạn mở rộng lịch để được như thế này - nhập văn bản với một ngày tháng lớp phủ.
- Bản giới thiệu
- Tải xuống nguồn
Đọc thêm
Để đọc thêm về jQuery UI. Bạn có thể đọc tài liệu đầy đủ ở đây:
- Bắt đầu với jQuery UI
- Giao diện người dùng theo chủ đề
- Giao diện người dùng jQuery: Các lớp API theo chủ đề
Suy nghĩ cuối cùng
Cảm ơn bạn đã đọc và làm theo hướng dẫn này, tôi hy vọng bạn thấy nó hữu ích. Và, nếu bạn có bất kỳ phản hồi nào hoặc muốn thêm những thứ có thể thiếu trong hướng dẫn này, vui lòng chỉ ra trong phần bình luận bên dưới. Cảm ơn (một lần nữa).
