Bagaimana Menyesuaikan dan Menanam jQuery UI Datepicker
UI jQuery hanya hebat dan kerana kemudahan digunakan, ia popular dan digunakan secara meluas dalam hampir mana-mana laman web yang memerlukan ciri interaktif.
Dan, dalam siaran ini, kami akan melihat salah satu ciri yang disediakan, widget Datepicker.
Kami akan cuba mempelajari cara menyesuaikan tema kalendar, supaya anda dapat membuat tema anda sendiri yang akan sesuai dengan reka bentuk keseluruhan anda. Walau bagaimanapun, anda memerlukan sedikit pemahaman dalam JavaScript dan kebiasaan dengan CSS sebelum mengikuti tutorial ini.
- Demo
- Muat turun Sumber
Jika anda sudah bersedia, mari bermula.
Aset
Mari kita menyediakan beberapa aset penting untuk kalendar.
Pertama, reka bentuk kalendar akan merujuk kepada fail PSD ini dari Premium Pixels. Oleh itu, sebaiknya muat turun terlebih dahulu untuk membantu kami mengambil contoh warna yang kami perlukan. Kemudian, muat turun dua pola dari Halus Corak yang akan kami gunakan sebagai latar belakang kalendar kami. Dalam contoh ini, kami memutuskan untuk menggunakan corak berikut: denim hitam dan kulit gelap.
Kami juga memerlukan alat pembangunan web seperti Firebug untuk memeriksa kelas / id unsur yang dijana oleh UI jQuery.
Baiklah, saya fikir kami mempunyai persediaan yang mencukupi. Sekarang mari kita pergi ke langkah pertama.
Langkah 1: Datepicker jQuery UI
Pertama, pergi ke halaman muat turun jQuery UI. Di halaman ini anda akan dibentangkan dengan beberapa pilihan, seperti berikut; Core UI, Widget, Interaksi dan Kesan.
Kita perlu cabut semua komponen, kerana kita tidak memerlukan mereka semua.
Kemudian, dalam Widget seksyen hanya pilih datepicker itu. UI jQuery akan memilih dependensi penting secara automatik, dan kemudian muat turun fail.
Pautan semua fail yang dimuat turun - kecuali CSS - ke dokumen kosong HTML anda, seperti berikut:
Langkah 2: Menyesuaikan Datepicker
Dalam langkah ini, kami akan mengkonfigurasi pemuat data dengan pilihan berikut.
Kod di atas akan mengarahkan jQuery untuk memaparkan kalendar pada elemen dengan datepicker ID. Jadi, kita perlu meletakkan perkara berikut div tag dengan - ID datepicker - di bahagian badan untuk membentuk kalendar:
Kini kalendar itu sepatutnya dijana dan kelihatan seperti ini, tanpa sebarang gaya, tetapi masih mempunyai fungsi.
Langkah 3: Gaya
Kini mari kita mula membuat kalendar. Kami akan mulakan dengan menormalkan semua elemen - seperti biasa - dan mencipta lembaran gaya baru, dalam contoh ini saya namakannya datepicker.css. Kemudian hubungkan semuanya ke dokumen HTML.
Kemudian, kita akan melampirkan latar belakang kepada badan supaya HTML kita tidak kelihatan terlalu jelas.
body background: url ('... /img/darkdenim3.png') repeat 0 0 # 555; Seterusnya, kami akan menentukan lebar datepicker itu, letakkannya ke tengah dan tambah bayang bayang untuk memberi kesan prominece ke kalendar.
.ui-datepicker width: 216px; ketinggian: auto; margin: 5px auto 0; fon: 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 mengalih keluar hiasan garis bawah lalai dari setiap tag anchor.
.ui-datepicker a text-decoration: none;
Kalendar di jQuery UI terbentuk dengan a jadual. Jadi, mari tambah 100% lebar untuk jadual, jadi ia akan mempunyai lebar maksimum yang sama seperti pembalut di atas; itu dia 216px
.jadual ui-datepicker lebar: 100%;
Penggayaan Seksyen Pengepala
The datepicker mempunyai bahagian header yang mengandungi Bulan & Tahun daripada kalendar. Bahagian ini akan mempunyai tekstur kulit gelap yang telah kami muat turun sebelumnya dengan warna font yang sedikit putih dan 1px bayangan putih di bahagian atas.
.ui-datepicker-header background: url ('... /img/dark_leather.png') repeat 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); teks-bayangan: 1px -1px 0px # 000; penapis: dropshadow (warna = # 000, offx = 1, offy = -1); garis ketinggian: 30px; lebar sempadan: 1px 0 0 0; gaya sempadan: pepejal; warna sempadan: # 111; Seterusnya, mari pusat Bulan kedudukan.
.ui-datepicker-title text-align: center;
Ganti semula Seterusnya dan Sebelumnya teks dengan gambar anak panah sprite dihiris dari JPA.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; lebar: 30px; ketinggian: 30px; teks-align: center; kursor: penunjuk; background-image: url ('... /img/arrow.png'); ulangi latar belakang: tidak ulangi; garis ketinggian: 600%; limpahan: tersembunyi; Kemudian, tetapkan kedudukan anak panah masing-masing.
.ui-datepicker-prev float: left; latar belakang: kedudukan -30px; .ui-datepicker-next float: right; kedudukan latar belakang: pusat 0px;
Sementara nama hari seksyen dibungkus dalam a thead, berdasarkan rujukan reka bentuk kami, ia akan mempunyai kecerunan sedikit putih. Dan, untuk memudahkan tugas kami, kami akan menggunakan alat ini untuk menghasilkan kod kecerunan:
.ui-datepicker thead background-color: # f7f7f7; latar belakang-imej: -moz-linear-kecerunan (atas, # f7f7f7 0%, # f1f1f1 100%); imej latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (0%, # f7f7f7), warna-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%); latar belakang-imej: linear-gradient (atas, # f7f7f7 0%, # f1f1f1 100%); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb;
The nama hari teks akan mempunyai warna kelabu gelap # 666666 dan mereka juga akan mempunyai putih nipis bayang-bayang teks untuk memberikan kesan yang ditekan.
.ui-datepicker th text-transform: uppercase; saiz fon: 6pt; padding: 5px 0; warna: # 666666; teks-bayangan: 1px 0px 0px #fff; penapis: dropshadow (color = # fff, offx = 1, offy = 0);
Pada ketika ini, kalendar akan muncul seperti ini:
Menggayakan Tarikh
Tarikh kalendar dibungkus dalam td atau data jadual. Jadi, kami akan menetapkan padding itu 0 untuk membuang ruang antara td dan memberikannya sempadan kanan 1px.
.ui-datepicker tbody td padding: 0; sempadan kanan: 1px pepejal #bbb;
Kecuali yang terakhir td, yang tidak akan mempunyai sempadan yang betul. Kami menetapkan sempadan yang betul kepada 0 untuk ini.
.ui-datepicker tbody td: kanak-kanak lepas border-right: 0px;
Baris jadual akan hampir sama. Ia akan mempunyai bawah sempadan 1px kecuali baris terakhir.
.ui-datepicker tbody tr border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: last-child border-bottom: 0px;
Styling Default, Hover dan Active State
Dalam langkah ini kita akan menentukan hover tarikh dan gaya aktif. Kami akan mula menentukan tarikh lalai tarikh dengan menentukan dimensi; pusat kedudukan teks tarikh, tambah warna kecerunan dan bayang putih dalaman.
.ui-datepicker td span, .ui-datepicker td a display: block-inline; font-weight: bold; teks-align: center; lebar: 30px; ketinggian: 30px; garis ketinggian: 30px; warna: # 666666; teks-bayangan: 1px 1px 0px #fff; penapis: 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-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (0%, # ededed), warna-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%); penapis: 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;
Apabila anda mengarahkan tarikh, ia akan berubah menjadi sedikit putih.
.ui-datepicker-calendar .ui-state-hover background: # f7f7f7;
Apabila tarikh berada dalam keadaan aktif, ia akan mempunyai 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; teks-bayangan: 0px 1px 0px # 4d7a85; penapis: dropshadow (warna = # 4d7a85, offx = 0, offy = 1); sempadan: 1px pepejal # 55838f; kedudukan: relatif; margin: -1px;
Sekarang, kalendar perlu kelihatan lebih baik.
Memperbaiki Kedudukan
Pada ketika ini, lihat pada tarikh dengan teliti. Apabila anda mengklik pada tarikh pada lajur pertama atau terakhir, anda akan melihat bahawa keadaan aktif meluap piksel dari tepi kalendar.
Jadi di sini, kita akan melakukan beberapa perbaikan kecil.
Mula-mula kita akan mengurangkan lebar tarikh 29px, dan tetapkan margin kanan lajur terakhir dan margin kiri lajur pertama kepada 0 untuk membalikkan -1px margin yang telah kita tetapkan sebelumnya untuk keadaan aktif.
.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; margin-left: 0; .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; margin-right: 0;
Tarikh pada baris terakhir kalendar juga akan mempunyai rawatan serupa.
.ui-datepicker-calendar tr: last-child .ui-state-active height: 29px; margin-bottom: 0;
Sekarang, mari lihat hasilnya. Nah, kalendar kini kelihatan cantik dan sesuai dengan sempurna sebagai rujukan reka bentuk kami. Dan, anda dapat melihat demo dan memuat turun sumber untuk memeriksa kod dari pautan di bawah imej.
- Demo
- Muat turun Sumber
Bonus: Maju Kalendar
Nah, hari ini kami telah banyak belajar tentang cara membuat tema tersuai untuk Datepicker jQuery UI. Tetapi anda tidak boleh berhenti di sini, kerana masih ada banyak perkara yang boleh dilanjutkan dari datepicker ini. Bergantung pada kemampuan jQuery dan CSS anda, anda memperluas kalendar menjadi seperti ini - input teks dengan datepicker overlay.
- Demo
- Muat turun Sumber
Bacaan lanjut
Untuk bacaan lanjut mengenai UI jQuery. Anda boleh membaca dokumentasi lengkap di sini:
- Bermula dengan UI jQuery
- UI jQUery Theming
- jQuery UI: kelas API Theming
Pemikiran Akhir
Terima kasih kerana membaca dan mengikuti tutorial ini, saya harap anda merasa berguna. Dan, Jika anda mempunyai maklum balas atau ingin menambahkan perkara yang mungkin hilang dari tutorial ini, jangan ragu untuk menunjukkannya di bahagian komen di bawah. Terima kasih sekali lagi).
