Kuidas kohandada ja muuta jQuery kasutajaliidese andmebaasi
jQuery UI on lihtsalt fantastiline ja selle kasutamise lihtsuse tõttu on see populaarne ja seda kasutatakse laialdaselt peaaegu igas veebisaidis, mis vajab interaktiivseid funktsioone.
Ja selles postituses vaatleme ühte pakutavatest funktsioonidest - Datepicker-vidinat.
Püüame õppida, kuidas kohandada kalendri teemat, nii et saate luua oma teema, mis vastab teie üldisele kujundusele. Siiski peate enne selle juhendi järgimist mõnevõrra mõistma JavaScripti ja CSS-i tundmist.
- Demo
- Allalaadimise allikas
Kui olete valmis, alustame.
Varad
Valmistame mõned kalendri olulised varad.
Esiteks viitab kalendri disain sellele PSD-failile Premium Pixels. Nii et me peaksime selle paremaks alla laadima, et aidata meil võtta vajalikke värve. Seejärel laadige alla kaks mustrit Peen Mustrid mida me kasutame oma kalendri taustana. Selles näites otsustasime kasutada järgmisi mustreid: must denim ja tume nahk.
Meil on vaja ka veebiarendustööriista nagu Firebug, et kontrollida elementide klasse / ID-sid, mis on genereeritud jQuery kasutajaliidese poolt.
Ma arvan, et meil on piisavalt ettevalmistusi. Nüüd lähme esimesse sammu.
1. etapp: jQuery UI-i andmetöötleja
Esiteks minge jQuery UI allalaadimise lehele. Sellel lehel esitatakse järgmised võimalused: kasutajaliidese põhi, vidinad, koostoimed ja efektid.
Me peaks eemaldage kõik komponendid, sest me ei vaja neid kõiki.
Siis Vidinad sektsioon valib ainult andmetöötluse. JQuery kasutajaliides valib olulised sõltuvused automaatselt ja seejärel lae alla faili.
Linkige kõik allalaaditud failid - välja arvatud CSS - oma HTML-i tühja dokumendiga järgmiselt:
Samm 2: Datepicker'i kohandamine
Selles etapis konfigureerime andmepakkuja järgmiste võimalustega.
Ülaltoodud kood juhendab jQueryt kalendri kuvamiseks elemendiga andmete vastuvõtja id. Niisiis, me peame tegema järgmise div sildi, millel on - datepicker ID, kehaosas kalendri moodustamiseks:
Nüüd peaks kalender olema juba genereeritud ja sellisena ilmunud, ilma igasuguste stiilideta, kuid sellel on siiski funktsionaalsus.
3. etapp: stiilid
Nüüd alustame kalendri kujundamist. Me alustame kõigi elementide normaliseerimisega - nagu tavaliselt - ja uue stiili loomisega, selles näites nimetan seda datepicker.css. Seejärel ühendage need kõik HTML-dokumendiga.
Seejärel lisame esmalt kehale tausta, nii et meie HTML ei tundu liiga lihtne.
keha taust: url ('… /img/darkdenim3.png') korrake 0 0 # 555; Järgmiseks täpsustame me andmete laadija laiuse, paigutame selle keskele ja lisame varju, et anda kalendrisse prominece-efekt.
.ui-datepicker laius: 216 px; kõrgus: auto; marginaal: 5px auto 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);
Samuti eemaldame igast ankrumärgist vaikimisi allajoonitud kaunistused.
.ui-datepicker a text-decoration: mitte;
JQuery UI kalendris on a tabel. Niisiis, lisame 100% laius tabel, nii on sellel sama maksimaalne laius kui ümbris; see on 216px
.ui-datepicker tabel laius: 100%;
Päiseosa kujundamine
Dokumendil on päiseosa, mis sisaldab Kuu aasta kalendrist. Sellel sektsioonil on tumedast nahast tekstuur, mille me eelnevalt alla laadisime, veidi värvilise kirja värviga 1tk valge vari üleval.
.ui-datepicker-header background: url ('… /img/dark_leather.png') korrake 0 0 000; värv: # e0e0e0; fondi kaal: rasvane; -webkit-box-shadow: sisend 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: 0px 1px 1px 0px rgba (250, 250, 250, .2); karp-vari: sisend 0px 1px 1px 0px rgba (250, 250, 250, .2); teksti-vari: 1px -1px 0px # 000; filter: dropshadow (värv = # 000, offx = 1, offy = -1); rea kõrgus: 30 px; piiri laius: 1px 0 0 0; piiri-stiil: tahke; äärevärv: # 111; Järgmisena laseme keskel Kuu positsiooni.
.ui-datepicker-title text-align: center;
Asenda Järgmine ja Eelmine tekst, mis sisaldab PSD-lt lõigatud sprite noolt.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; laius: 30 px; kõrgus: 30 px; teksti joondamine: keskus; kursor: pointer; taustapilt: url ('… /img/arrow.png'); taustaproov: korduv; joone kõrgus: 600%; ülevool: peidetud; Seejärel reguleerige nooleasendit vastavalt.
.ui-datepicker-prev float: vasakul; taustapositsioon: keskus -30px; .ui-datepicker-next float: right; taustapositsioon: keskus 0px;
Samal ajal kui päeva nimed lõik on pakitud a Thead, meie disainilahenduse põhjal on see veidi valge. Meie ülesande lihtsustamiseks kasutame seda tööriista gradientkoodi loomiseks:
.ui-datepicker thead taustavärv: # f7f7f7; taustapilt: -moz-linear-gradient (ülemine, # f7f7f7 0%, # f1f1f1 100%); taustapilt: -webkit-gradient (lineaarne, vasakul üleval, vasakul all, värvipeatus (0%, # f7f7f7), värvipeatus (100%, # f1f1f1)); taustapilt: -webkit-lineaarne gradient (ülemine, # f7f7f7 0%, # f1f1f1 100%); taustapilt: -o-lineaarne gradient (ülemine, # f7f7f7 0%, # f1f1f1 100%); taustapilt: -ms-lineaarne gradient (ülemine, # f7f7f7 0%, # f1f1f1 100%); taustapilt: lineaarne gradient (ülemine, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); alumine serv: 1tx tahke #bbb;
The päeva nimed tekstil on tumehall # 666666 ja neil on ka õhuke valge teksti vari see annab pressitud efekti.
.ui-datepicker th text-transform: suurtäht; fondi suurus: 6pt; polsterdus: 5px 0; värv: # 666666; teksti-vari: 1px 0px 0px #fff; filter: dropshadow (color = # fff, offx = 1, offy = 0);
Sel hetkel ilmub kalender selliseks:
Kuupäevade kujundamine
Kalendri kuupäevad on pakitud td või tabeli andmed. Niisiis, me seame polsterdusele 0 eemaldada tühikute vahel tühikud td ja anna talle 1px parempoolne äär.
.ui-datepicker tbody td polster: 0; parempoolne: 1px tahke #bbb;
Välja arvatud viimane td, mis ei ole õige piiri. Selle jaoks seadistame 0 paremale.
.ui-datepicker tbody td: viimane laps right-right: 0px;
Tabeli rida on peaaegu sama. Sellel on 1px piirjoon, välja arvatud viimane rida.
.ui-datepicker tbody tr piiri-alumine: 1px tahke #bbb; .ui-datepicker tbody tr: viimane laps serva-alumine: 0px;
Vaikimisi, hoveri ja aktiivse oleku kujundamine
Selles etapis määratleme kuupäeva ja aktiivse stiili. Esmalt määratleme kuupäeva vaikimisi oleku, määratledes mõõtme; keskele kuupäeva teksti asukoht, lisage gradientvärv ja sisemine valge vari.
.ui-datepicker td span, .ui-datepicker td a kuva: inline-block; fondi kaal: rasvane; teksti joondamine: keskus; laius: 30 px; kõrgus: 30 px; rea kõrgus: 30 px; värv: # 666666; teksti-vari: 1px 1px 0px #fff; filter: dropshadow (värv = # fff, offx = 1, süü = 1); .ui-datepicker-calendar .ui-state-default taust: #ededed; taust: -moz-linear-gradient (ülemine, #ededed 0%, #dedede 100%); taust: -webkit-gradient (lineaarne, vasakul üleval, vasakul all, värvipeatus (0%, # eded), värvipeatus (100%, # dedede)); taust: -webkit-lineaarne gradient (top, #ededed 0%, # dedede 100%); taust: -o-lineaarne gradient (top, #ededed 0%, # dedede 100%); taust: -ms-lineaarne gradient (top, #ededed 0%, # dedede 100%); taust: lineaarne gradient (top, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: 1px 1px 0px 0px rgba (250, 250, 250, .5); karp-vari: 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-valimata .ui-state-default taust: # f4f4f4; värv: # b4b3b3;
Kui liigute kuupäeva kohal, muutub see veidi valge.
.ui-datepicker-calendar .ui-state-hover taust: # f7f7f7;
Kui kuupäev on aktiivses olekus, on sellel järgmine stiil.
.ui-datepicker-calendar .ui-state-active background: # 6eafbf; -webkit-box-shadow: sisend 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: sisend 0px 0px 10px 0px rgba (0, 0, 0, .1); värv: # e0e0e0; teksti-vari: 0px 1px 0px # 4d7a85; filter: dropshadow (värv = # 4d7a85, offx = 0, offy = 1); piir: 1px tahke # 55838f; positsioon: suhteline; varu: -1px;
Nüüd peaks kalender olema palju parem.
Positsiooni kinnitamine
Siinkohal vaadake hoolikalt kuupäeva. Kui klõpsate esimesel või viimasel veerus kuupäeva, märkate, et aktiivne olek, mis ületab pikslite kalendri servast.
Nii et siin teeme mõned väikesed parandused.
Esmalt vähendame kuupäeva laiust 29x, ja määrake esimese veeru viimase veeru paremal äärel ja vasakul serval 0 tagurdama -1tk varu, mille oleme eelnevalt aktiivse oleku jaoks määranud.
.ui-datepicker-calendar td: esimese lapse .ui-state-aktiivne laius: 29px; margin-left: 0; .ui-datepicker-calendar td: viimase lapse .ui-state-aktiivne laius: 29px; marginaal-parem: 0;
Kalendri viimasel real on ka sarnane kohtlemine.
.ui-datepicker-calendar tr: viimase lapse .ui-state-aktiivne kõrgus: 29px; margin-bottom: 0;
Nüüd vaatame tulemust. Noh, kalender on nüüd ilus ja sobib ideaalselt meie disainilahenduse viiteks. Ja näete demot ja laadige allikas alla, et vaadata koodi pildi all olevatest linkidest.
- Demo
- Allalaadimise allikas
Boonus: pikendage kalendrit
Noh, täna oleme palju õppinud, kuidas luua kohandatud teema jQuery UI Datepickerile. Aga te ei tohiks siin peatuda, sest veel on palju selliseid asju, mida saab sellest ajakirjanikust laiendada. Sõltuvalt teie jQuery- ja CSS-oskustest pikendate kalendrit selliseks - tekstisisestus koos ülekandetarkvara.
- Demo
- Allalaadimise allikas
Lisalugemist
JQuery kasutajaliidese edasiseks lugemiseks. Täielikku dokumentatsiooni saate lugeda siit:
- JQuery UI-ga alustamine
- Theming jQUery kasutajaliides
- jQuery UI: Theming API klassid
Lõplikud mõtted
Tänan teid selle juhendi lugemise ja järgimise eest, ma loodan, et see on kasulik. Ja kui teil on tagasisidet või soovite lisada sellisest õpetusest puuduvaid asju, siis võite seda märkida allpool olevas kommentaaride jaotises. Aitäh veel kord).
