JQuery UI -tietokannan mukauttaminen ja niiden muokkaaminen

jQuery-käyttöliittymä on yksinkertaisesti mahtava ja helppokäyttöisyyden vuoksi se on suosittu ja laajalti käytetty lähes kaikissa sivustoissa, jotka tarvitsevat interaktiivisia ominaisuuksia.

Ja tässä viestissä tarkastelemme yhtä tarjottavista ominaisuuksista, Datepicker-widgetistä.

Yritämme oppia mukauttamaan kalenterin teemaa, jotta voit luoda oman teeman, joka vastaa yleistä suunnittelua. Tarvitset kuitenkin hieman ymmärrystä JavaScriptissä ja CSS: n tuntemus ennen tämän oppaan suorittamista.

• esittely
• Lataa lähde

Jos olet valmis, aloitetaan.

Varat

Valmistellaan joitakin kalenterin tärkeimpiä varoja.

Ensinnäkin kalenterisuunnittelu viittaa tähän PSD-tiedostoon Premium Pixelsistä. Joten meidän on parasta ladata se ensin ja auttaa meitä ottamaan näytteen tarvittavista väreistä. Lataa sitten kaksi mallia Hienovarainen Kuviot että käytämme kalenterimme taustana. Tässä esimerkissä päätimme käyttää seuraavia kuvioita: musta denim ja tumma nahka.

Tarvitsemme myös Web-kehitystyökalun, kuten Firebugin, jQuery-käyttöliittymän tuottamien elementtiluokkien / tunnusten tarkastamiseksi.

No, mielestäni meillä on ollut riittävästi valmistelua. Nyt siirrymme ensimmäiseen vaiheeseen.

Vaihe 1: jQuery UI Datepicker

Siirry ensin jQuery-käyttöliittymän lataussivulle. Tässä sivulla esitellään muutamia vaihtoehtoja seuraavasti; UI-ydin, widgetit, vuorovaikutukset ja vaikutukset.

Meidän pitäisi poista kaikkien komponenttien valinta, koska emme tarvitse niitä kaikkia.

Sitten widgetit Valitse vain datapalvelin. JQuery-käyttöliittymä valitsee olennaiset riippuvuudet automaattisesti ja sitten ladata tiedosto.

Linkitä kaikki ladatut tiedostot - paitsi CSS - HTML-tyhjäyn asiakirjaan seuraavasti:

Vaihe 2: Datapickerin mukauttaminen

Tässä vaiheessa määritämme datapaketin seuraavilla vaihtoehdoilla.

Yllä oleva koodi opastaa jQueryn näyttämään kalenterin elementillä päivämäärävalitsin id. Joten meidän on tehtävä seuraava div tunniste - datepicker ID - runko-osassa kalenterin muodostamiseksi:

Nyt kalenterin olisi pitänyt olla jo luotu ja näyttää tältä, tavallista ilman mitään tyylejä, mutta silti siinä on toiminnot.

Vaihe 3: Tyylit

Aloita nyt kalenterin muotoilu. Aloitamme normalisoimalla kaikki elementit - kuten tavallista - ja luomalla uuden tyylitaulukon, tässä esimerkissä nimeän sen datepicker.css. Liitä ne sitten HTML-dokumenttiin.

Sitten liitämme ensin kehon taustan, joten HTML ei näytä liian selkeältä.

runko tausta: url ('… /img/darkdenim3.png') toista 0 0 # 555; 

Seuraavaksi määritämme datanpyynnön leveyden, asetamme sen keskelle ja lisäämällä varjostuksen antamaan prominece-vaikutuksen kalenteriin.

.ui-datepicker leveys: 216px; korkeus: auto; marginaali: 5px auto 0; fontti: 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); 

Poistamme myös jokaisen ankkuritunnisteen oletusalennuksen.

.ui-datepicker a text-decoration: ei; 

JQuery UI: n kalenteri muodostetaan a: lla pöytä. Joten lisätään 100% leveys pöytä, joten sen leveys on sama kuin edellä mainittu kääre; tuo on 216px

.ui-datepicker-taulukko leveys: 100%; 

Otsikon osan muotoilu

Datapalvelimessa on otsikko, joka sisältää Kuukausi vuosi kalenterin. Tässä osassa on tumma nahkainen tekstuuri, jonka olemme aiemmin ladanneet hieman valkoisella kirjasintyypillä ja 1px valkoinen varjo yläosassa.

.ui-datepicker-header background: url ('… /img/dark_leather.png') toista 0 0 # 000; väri: # e0e0e0; font-paino: lihavoitu; -webkit-box-shadow: 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: 0px 1px 1px 0px rgba (250, 250, 250, .2); ruutu-varjo: 0px 1px 1px 0px rgba (250, 250, 250, .2); teksti-varjo: 1px -1px 0px # 000; suodatin: dropshadow (väri = # 000, offx = 1, offy = -1); linjan korkeus: 30px; reunan leveys: 1px 0 0 0; raja-tyyli: kiinteä; raja-väri: # 111; 

Seuraavaksi keskity Kuukausi asento.

 .ui-datepicker-title text-align: center; 

Korvata Seuraava ja Taaksepäin teksti, jossa on sprite-nuolikuvia, jotka on leikattu PSD: stä.

.ui-datepicker-prev, .ui-datepicker-next display: inline-block; leveys: 30px; korkeus: 30px; text-align: center; kohdistin: osoitin; taustakuva: url ('… /img/arrow.png'); tausta-toisto: ei-toista; linjan korkeus: 600%; ylivuoto piilotettu; 

Säädä sitten nuolen asentoa.

.ui-datepicker-prev float: vasen; tausta-asema: keskellä -30px;  .ui-datepicker-next float: right; tausta-asema: keskus 0px; 

Samalla kun päivän nimet osa on kääritty a thead, Suunnitteluohjeen perusteella se on hieman valkoista. Ja yksinkertaistamaan tehtävää, käytämme tätä työkalua gradienttikoodin luomiseen:

.ui-datepicker thead taustaväri: # f7f7f7; taustakuva: -moz-linear-gradient (alkuun, # f7f7f7 0%, # f1f1f1 100%); taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, # f7f7f7), värin pysäytys (100%, # f1f1f1)); taustakuva: -webkit-lineaarinen gradientti (alkuun, # f7f7f7 0%, # f1f1f1 100%); taustakuva: -o-lineaarinen gradientti (alkuun, # f7f7f7 0%, # f1f1f1 100%); taustakuva: -ms-lineaarinen gradientti (alkuun, # f7f7f7 0%, # f1f1f1 100%); taustakuva: lineaarinen gradientti (alkuun, # f7f7f7 0%, # f1f1f1 100%); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); reunapohja: 1px kiinteä #bbb; 

päivän nimet tekstissä on tummanharmaa väri # 666666 ja heillä on myös ohut valkoinen text-shadow antaa sille puristetun vaikutuksen.

.ui-datepicker th text-transform: isot kirjaimet; kirjasinkoko: 6pt; pehmuste: 5px 0; väri: # 666666; teksti-varjo: 1px 0px 0px #fff; suodatin: dropshadow (väri = # fff, offx = 1, offy = 0); 

Tässä vaiheessa kalenteri näyttää tältä:

Päivien muotoilu

Kalenterin päivämäärät on kääritty td tai taulukon tiedot. Joten asetamme pehmusteen 0 poistaa välilyönnit td ja anna sille oikea 1px raja.

.ui-datepicker tbody td pehmuste: 0; raja-oikea: 1kpl kiinteä #bbb; 

Lukuun ottamatta viimeistä td, jossa ei ole oikeaa rajaa. Määritämme oikean reunan 0: ksi.

.ui-datepicker tbody td: last-child border-right: 0px; 

Taulukon rivi on lähes sama. Siinä on 1px rajapohja, lukuun ottamatta viimeistä riviä.

.ui-datepicker tbody tr reunapohja: 1px kiinteä #bbb;  .ui-datepicker tbody tr: last-child border-bottom: 0px; 

Oletusarvon, hoverin ja aktiivisen tilan muotoilu

Tässä vaiheessa määritämme päivämäärän hover ja aktiiviset tyylit. Määritämme ensin päivämäärän oletusarvon määrittämällä ulottuvuuden; keskitä päivämäärän tekstin sijainti, lisää kaltevuusväri ja sisäinen valkoinen varjo.

.ui-datepicker td span, .ui-datepicker td a näyttö: inline-block; font-paino: lihavoitu; text-align: center; leveys: 30px; korkeus: 30px; linjan korkeus: 30px; väri: # 666666; teksti-varjo: 1px 1px 0px #fff; suodatin: dropshadow (väri = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default tausta: #ededed; tausta: -moz-linear-gradient (alkuun, #ededed 0%, #dedede 100%); tausta: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, # ededed), värin pysäytys (100%, # dedede)); tausta: -webkit-lineaarinen kaltevuus (alkuun, #ededed 0%, # vähennetään 100%); tausta: -o-lineaarinen kaltevuus (alkuun, #ededed 0%, # vähennetään 100%); tausta: -ms-lineaarinen kaltevuus (ylhäällä, #ededed 0%, # dedede 100%); tausta: lineaarinen kaltevuus (alkuun, #ededed 0%, # 100%); suodatin: 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); laatikko-varjo: 1px 1px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-ei-valittavissa .ui-state-default tausta: # f4f4f4; väri: # b4b3b3; 

Kun siirrät päivämäärän yli, se muuttuu hieman valkoiseksi.

 .ui-datepicker-calendar .ui-state-hover tausta: # f7f7f7; 

Kun päivämäärä on aktiivisessa tilassa, sillä on seuraavat tyylit.

 .ui-datepicker-calendar .ui-state-active tausta: # 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); laatikko-varjo: upotettu 0px 0px 10px 0px rgba (0, 0, 0, .1); väri: # e0e0e0; teksti-varjo: 0px 1px 0px # 4d7a85; suodatin: dropshadow (väri = # 4d7a85, offx = 0, offy = 1); raja: 1kpl kiinteä # 55838f; asema: suhteellinen; marginaali: -1px; 

Nyt kalenterin pitäisi näyttää paljon paremmalta.

Sijainnin korjaaminen

Katsokaa tässä vaiheessa tarkasti. Kun napsautat päivämäärää ensimmäisessä tai viimeisessä sarakkeessa, huomaa, että aktiivinen tila, joka ylittää pikselin kalenterin reunasta.

Joten tässä teemme pieniä korjauksia.

Ensin alennetaan päivämäärän leveyttä 29px, ja aseta ensimmäisen sarakkeen viimeisen sarakkeen oikea marginaali ja vasemman reunan marginaali 0 kääntää -1px marginaali, jonka olemme aiemmin asettaneet aktiiviselle tilalle.

.ui-datepicker-calendar td: ensimmäinen lapsi .ui-state-aktiivinen leveys: 29px; margin-left: 0;  .ui-datepicker-calendar td: viimeisimmän lapsen .ui-state-aktiivinen leveys: 29px; marginaali-oikea: 0;  

Kalenterin viimeisellä rivillä on myös samanlainen kohtelu.

.ui-datepicker-calendar tr: last-last .ui-state-aktiivinen korkeus: 29px; marginaalin pohja: 0; 

Katsotaan nyt tulosta. Kalenteri näyttää nyt kauniilta ja sopii erinomaisesti suunnitteluviitteeseemme. Voit myös nähdä demon ja ladata lähdekoodin koodin tarkastelemiseksi kuvan alla olevista linkeistä.

• esittely
• Lataa lähde

Bonus: Laajenna kalenteria

No, tänään olemme oppineet paljon siitä, miten luoda mukautettu teema jQuery UI Datepicker. Mutta sinun ei pitäisi pysähtyä täällä, koska on vielä monia asioita, joita voidaan laajentaa tästä tietokannasta. Laajenna kalenteria jQuery- ja CSS-taitosi mukaan - tekstinsyöttö peittokuvan avulla.

• esittely
• Lataa lähde

Lue lisää

Lue lisää jQuery-käyttöliittymästä. Voit lukea täydelliset asiakirjat täältä:

• JQuery UI: n käytön aloittaminen
• Theming jQUery UI
• jQuery UI: Theming API -luokat

Lopulliset ajatukset

Kiitos, että olet lukenut tämän oppaan ja seurannut sitä. Toivon, että löydät sen hyödylliseksi. Ja jos sinulla on palautetta tai haluat lisätä asioita, jotka saattavat puuttua tästä opetusohjelmasta, voit vapaasti huomauttaa sen alla olevasta kommentti-osiosta. Kiitos taas).