Bagaimana Cara Mengubahsuaikan dan Tema jQuery UI Datepicker
jQuery UI benar-benar luar biasa dan karena kemudahan penggunaan, itu populer dan banyak digunakan di hampir semua situs web yang membutuhkan fitur interaktif.
Dan, dalam posting ini, kita akan melihat salah satu fitur yang disediakan, widget Datepicker.
Kami akan mencoba mempelajari cara menyesuaikan tema kalender, sehingga Anda akan dapat membuat tema Anda sendiri yang akan sesuai dengan desain keseluruhan Anda. Namun, Anda perlu sedikit pemahaman dalam JavaScript dan terbiasa dengan CSS sebelum mengikuti tutorial ini.
- Demo
- Sumber Unduhan
Jika Anda siap, mari kita mulai.
Aset
Mari kita siapkan beberapa aset penting untuk kalender.
Pertama, desain kalender akan merujuk ke file PSD ini dari Premium Pixels. Jadi sebaiknya kita unduh terlebih dahulu untuk membantu kita mengambil sampel warna yang kita butuhkan. Kemudian, unduh dua pola dari Halus Pola yang akan kita gunakan sebagai latar belakang kalender kita. Dalam contoh ini, kami memutuskan untuk menggunakan pola berikut: denim hitam dan kulit gelap.
Kami juga akan memerlukan alat pengembangan web seperti Firebug untuk memeriksa kelas elemen / id yang dihasilkan oleh jQuery UI.
Yah, saya pikir kita sudah memiliki persiapan yang cukup. Sekarang, mari kita pergi ke langkah pertama.
Langkah 1: jQuery UI Datepicker
Pertama, buka halaman unduh jQuery UI. Di halaman ini Anda akan disajikan dengan beberapa opsi, sebagai berikut; Inti UI, Widget, Interaksi dan Efek.
Kita harus batalkan pemilihan semua komponen, karena kita tidak membutuhkan semuanya.
Lalu, di Widget bagian pilih hanya datepicker. UI jQuery akan memilih dependensi esensial secara otomatis, lalu unduh berkas.
Tautkan semua file yang diunduh - kecuali CSS - ke dokumen kosong HTML Anda, sebagai berikut:
Langkah 2: Menyesuaikan Datepicker
Pada langkah ini, kami akan mengonfigurasi datepicker dengan opsi berikut.
Kode di atas akan menginstruksikan jQuery untuk menampilkan kalender pada elemen dengan datepicker id. Jadi, kita perlu menempatkan yang berikut ini div tag dengan - ID datepicker - di bagian tubuh untuk membentuk kalender:
Sekarang kalender seharusnya sudah dibuat dan muncul seperti ini, polos tanpa gaya apa pun, tetapi masih memiliki fungsi.
Langkah 3: Gaya
Sekarang mari kita mulai menata kalender. Kita akan mulai dengan menormalkan semua elemen - seperti biasa - dan membuat stylesheet baru, dalam contoh ini saya beri nama datepicker.css. Kemudian tautkan semuanya ke dokumen HTML.
Kemudian, pertama-tama kita akan melampirkan latar belakang ke tubuh sehingga HTML kita tidak terlihat terlalu polos.
body background: url ('… /img/darkdenim3.png') ulangi 0 0 # 555; Selanjutnya, kita akan menentukan lebar datepicker, menempatkannya ke tengah dan menambahkan drop shadow untuk memberikan efek prominece ke kalender.
.ui-datepicker width: 216px; tinggi: otomatis; margin: 5px otomatis 0; font: 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); box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Kami juga akan menghapus dekorasi garis bawah default dari setiap tag jangkar.
.ui-datepicker a text-decoration: none;
Kalender di jQuery UI dibentuk dengan a meja. Jadi, mari kita tambahkan 100% lebar untuk meja, sehingga memiliki lebar maksimum yang sama dengan pembungkus di atas; itu adalah 216px
.tabel ui-datepicker width: 100%;
Styling bagian Header
Datepicker memiliki bagian header yang berisi Bulan tahun kalender. Bagian ini akan memiliki tekstur kulit gelap yang telah kami unduh sebelumnya dengan warna font yang sedikit putih dan 1px bayangan putih di bagian atas.
.ui-datepicker-header background: url ('… /img/dark_leather.png') ulangi 0 0 # 000; warna: # e0e0e0; font-weight: bold; -webkit-box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, .2); text-shadow: 1px -1px 0px # 000; filter: dropshadow (color = # 000, offx = 1, offy = -1); garis-tinggi: 30px; border-width: 1px 0 0 0; gaya perbatasan: solid; warna perbatasan: # 111; Selanjutnya, mari kita pusatkan Bulan posisi.
.ui-datepicker-title text-align: center;
Ganti Berikutnya dan Sebelumnya teks dengan gambar panah sprite diiris dari PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; lebar: 30px; tinggi: 30px; perataan teks: tengah; kursor: pointer; background-image: url ('... /img/arrow.png'); background-repeat: no-repeat; garis-tinggi: 600%; overflow: disembunyikan; Kemudian, sesuaikan posisi panah masing-masing.
.ui-datepicker-prev float: left; background-position: center -30px; .ui-datepicker-next float: right; posisi latar belakang: tengah 0px;
Selagi nama hari Bagian dibungkus dalam a thead, berdasarkan referensi desain kami, itu akan memiliki gradien yang sedikit putih. Dan, untuk menyederhanakan tugas kami, kami akan menggunakan alat ini untuk menghasilkan kode gradien:
.ui-datepicker thead background-color: # f7f7f7; background-image: -moz-linear-gradient (atas, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # f7f7f7), color-stop (100%, # f1f1f1)); background-image: -webkit-linear-gradient (atas, # f7f7f7 0%, # f1f1f1 100%); background-image: -o-linear-gradient (atas, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linear-gradient (atas, # f7f7f7 0%, # f1f1f1 100%); background-image: linear-gradient (atas, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb;
Itu nama hari teks akan memiliki warna abu-abu gelap # 666666 dan mereka juga akan memiliki putih tipis bayangan teks untuk memberikan efek yang ditekan.
.ui-datepicker th text-transform: huruf besar; ukuran font: 6pt; padding: 5px 0; warna: # 666666; text-shadow: 1px 0px 0px #fff; filter: dropshadow (color = # fff, offx = 1, offy = 0);
Pada titik ini, kalender akan muncul seperti ini:
Menata Tanggal
Tanggal kalender terbungkus dalam td atau data tabel. Jadi, kami akan mengatur padding ke 0 untuk menghapus spasi di antara td dan berikan batas kanan 1px.
.ui-datepicker tbody td padding: 0; border-right: 1px solid #bbb;
Kecuali yang terakhir td, yang tidak akan memiliki batas kanan. Kami menetapkan batas kanan ke 0 untuk ini.
.ui-datepicker tbody td: last-child border-right: 0px;
Baris tabel akan hampir sama. Ini akan memiliki batas bawah 1px kecuali untuk baris terakhir.
.ui-datepicker tbody tr border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: last-child border-bottom: 0px;
Styling Keadaan Default, Arahkan dan Aktif
Pada langkah ini kita akan menentukan hover tanggal dan gaya aktif. Kami pertama-tama akan menentukan status default tanggal dengan menentukan dimensi; tengah posisi teks tanggal, tambahkan warna gradien dan bayangan putih bagian dalam.
.ui-datepicker td span, .ui-datepicker td display: inline-block; font-weight: bold; perataan teks: tengah; lebar: 30px; tinggi: 30px; garis-tinggi: 30px; warna: # 666666; text-shadow: 1px 1px 0px #fff; filter: dropshadow (color = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default background: #ededed; latar belakang: -moz-linear-gradient (atas, #ededed 0%, #dedede 100%); latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # ededed), color-stop (100%, # dedede)); latar belakang: -webkit-linear-gradient (atas, #ededed 0%, # dedede 100%); latar belakang: -o-linear-gradient (atas, #ededed 0%, # dedede 100%); latar belakang: -ms-linear-gradient (atas, #ededed 0%, # dedede 100%); latar belakang: linear-gradient (atas, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default background: # f4f4f4; warna: # b4b3b3;
Saat Anda mengarahkan kursor ke tanggal, itu akan berubah menjadi sedikit putih.
.ui-datepicker-calendar .ui-state-hover background: # f7f7f7;
Ketika tanggal dalam keadaan aktif, itu akan memiliki gaya berikut.
.ui-datepicker-calendar .ui-state-active background: # 6eafbf; -webkit-box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); warna: # e0e0e0; text-shadow: 0px 1px 0px # 4d7a85; filter: dropshadow (color = # 4d7a85, offx = 0, offy = 1); perbatasan: 1px solid # 55838f; posisi: relatif; margin: -1px;
Sekarang, kalender akan terlihat jauh lebih baik.
Memperbaiki Posisi
Pada titik ini, lihat tanggal dengan hati-hati. Ketika Anda mengklik pada tanggal di kolom pertama atau terakhir, Anda akan melihat bahwa keadaan aktif meluap piksel dari tepi kalender.
Jadi di sini, kami akan melakukan beberapa perbaikan kecil.
Pertama kita akan mengurangi lebar tanggal menjadi 29px, dan atur margin kanan kolom terakhir dan margin kiri kolom pertama 0 untuk membalikkan -1px margin yang telah kita tentukan sebelumnya untuk status aktif.
.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; margin-kiri: 0; .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; margin-right: 0;
Tanggal di baris terakhir kalender juga akan memiliki perlakuan serupa.
.ui-datepicker-calendar tr: last-child .ui-state-active height: 29px; margin-bottom: 0;
Sekarang, mari kita lihat hasilnya. Kalender sekarang terlihat indah dan sangat cocok sebagai referensi desain kami. Dan, Anda dapat melihat demo dan mengunduh sumber untuk memeriksa kode dari tautan di bawah gambar.
- Demo
- Sumber Unduhan
Bonus: Perpanjang Kalender
Nah, hari ini kami telah belajar banyak tentang cara membuat tema khusus untuk jQuery UI Datepicker. Tetapi Anda tidak boleh berhenti di sini, karena masih banyak hal yang dapat diperpanjang dari datepicker ini. Bergantung pada kemampuan jQuery dan CSS Anda, Anda memperpanjang kalender menjadi seperti ini - input teks dengan datepicker overlay.
- Demo
- Sumber Unduhan
Bacaan lebih lanjut
Untuk membaca lebih lanjut tentang jQuery UI. Anda dapat membaca dokumentasi selengkapnya di sini:
- Memulai dengan jQuery UI
- Mereka jQUery UI
- jQuery UI: Kelas-kelas API mereka
Pikiran terakhir
Terima kasih telah membaca dan mengikuti tutorial ini, semoga bermanfaat. Dan, Jika Anda memiliki umpan balik atau ingin menambahkan hal-hal yang mungkin hilang dari tutorial ini, silakan tunjukkan di bagian komentar di bawah ini. Terima kasih lagi).
