Hogyan lehet testreszabni és a jQuery UI adatgyűjtőjét használni
A jQuery UI egyszerűen fantasztikus, és az egyszerű használat miatt népszerű és széles körben használják szinte minden olyan webhelyen, amely interaktív funkciókat igényel.
Ebben a bejegyzésben megnézzük az egyik rendelkezésre álló funkciót, a Datepicker widgetet.
Megpróbáljuk megtanulni, hogyan kell testreszabni a naptár témáját, hogy létrehozhassa saját témáját, amely megfelel az általános tervnek. A bemutató megkezdése előtt azonban szüksége van egy kis megértésre a JavaScript-ben és a CSS ismeretében.
- Demó
- Letöltés forrása
Ha készen állsz, kezdjük.
Az eszközök
Készítsünk néhány fontos eszközt a naptár számára.
Először is, a naptártervezés a Premium Pixelekből származó PSD-fájlra vonatkozik. Tehát jobb, ha előbb letölthetjük, hogy segítsünk nekünk, hogy mintát vegyünk a szükséges színekről. Ezután töltsön le két mintát Apró minták amit naptárunk háttereként fogunk használni. Ebben a példában úgy döntöttünk, hogy a következő mintákat alkalmazzuk: fekete farmer és sötét bőr.
Szükségünk lesz egy olyan webes fejlesztőeszközre is, mint a Firebug, hogy ellenőrizze a jQuery UI által generált elemosztályokat / id-ket.
Nos, azt hiszem, elég felkészültünk. Most menjünk az első lépéshez.
1. lépés: a jQuery UI adatrögzítő
Először menjen a jQuery UI letöltési oldalára. Ebben az oldalon néhány opciót mutat be az alábbiak szerint; a felhasználói felület alapja, a widgetek, az interakciók és a hatások.
Nekünk kellene törölje az összes összetevő kijelölését, mivel nem kell mindegyikük.
Ezután a Widgets A szakasz csak az adatrögzítőt válassza. A jQuery felhasználói felület automatikusan és automatikusan kiválasztja az alapvető függőségeket Letöltés a fájl.
Kapcsolja össze a letöltött fájlokat - kivéve a CSS-t - a HTML-üres dokumentumhoz:
2. lépés: Az adatgyűjtő testreszabása
Ebben a lépésben az alábbi beállításokkal konfigurálunk egy adatrögzítőt.
A fenti kód utasítja a jQuery-t, hogy megjelenítse a naptárat egy elemen dátumválasztó id. Szóval, meg kell tennünk a következőket div címke - datepicker ID - a testrészben a naptár létrehozásához:
Most már a naptárnak már létre kellett volna jönnie, és úgy tűnhet, mintha ez egyszerű, stílus nélkül, de mégis rendelkezik a funkcióval.
3. lépés: A stílusok
Most kezdjük meg a naptár stílusát. Elkezdjük az összes elem normalizálását - mint szokásos módon - és új stíluslap létrehozását, ebben a példában nevezem datepicker.css. Ezután kapcsolja össze őket a HTML dokumentummal.
Ezután először csatolunk egy hátteret a testhez, így a HTML nem túl sima.
test háttér: url ('… /img/darkdenim3.png') ismétlés 0 0 # 555; Ezután megadjuk a datepicker szélességét, elhelyezzük a középre, és hozzáadjuk az árnyékot ahhoz, hogy a prominece effektet adhassuk a naptárnak.
.ui-datepicker szélesség: 216px; magasság: auto; margó: 5px auto 0; betűtípus: 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);
Mi is eltávolítjuk az alapértelmezett aláhúzás díszítést minden horgonycímkéről.
.ui-datepicker a text-decoration: nincs;
A jQuery UI-ben a naptár a asztal. Szóval, add hozzá 100% szélessége a asztal, így ugyanolyan maximális szélességű lesz, mint a fenti burkolat; ez az 216px
.ui-datepicker tábla szélesség: 100%;
A fejlécrész stílusa
Az adatrögzítőnek van egy fejlécrésze, amely tartalmaz Hónap év a naptár. Ez a szakasz a sötét bőr textúra, amit korábban letöltöttünk, kissé fehér betűszínnel és 1 képpont fehér árnyék a tetején.
.ui-datepicker-header background: url ('… /img/dark_leather.png') 0 0 000 ismétlés; szín: # e0e0e0; font-súly: félkövér; -webkit-box-shadow: 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: 0px 1px 1px 0px rgba (250, 250, 250, .2); árnyék: 0px 1px 1px 0px rgba (250, 250, 250, .2); szöveg-árnyék: 1px -1px 0px # 000; szűrő: dropshadow (szín = # 000, offx = 1, offy = -1); vonalmagasság: 30px; határszélesség: 1px 0 0 0; határstílus: szilárd; szegélyszín: # 111; Ezután középpontba helyezzük a Hónap pozíció.
.ui-datepicker-title text-align: center;
Helyettesíteni a Következő és Előző szöveget a PSD-ből szeletelt sprite nyilakkal.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; szélesség: 30px; magasság: 30px; szöveg-igazítás: központ; kurzor: mutató; háttérkép: url ('… /img/arrow.png'); háttér-ismétlés: nincs ismétlés; vonalmagasság: 600%; túlcsordulás: rejtett; Ezután állítsa be a nyíl pozícióját.
.ui-datepicker-prev float: balra; háttér-pozíció: központ -30px; .ui-datepicker-next float: right; háttér-pozíció: középpont 0px;
Amíg a napnevek A szekciót egy thead, tervezési referenciánk alapján enyhén fehér színátmenet lesz. A feladat egyszerűsítése érdekében ezt az eszközt használjuk a gradiens kód létrehozásához:
.ui-datepicker thead háttérszín: # f7f7f7; háttérkép: -moz-lineáris gradiens (felső, # f7f7f7 0%, # f1f1f1 100%); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, # f7f7f7), szín-stop (100%, # f1f1f1)); háttérkép: -webkit-lineáris gradiens (felső, # f7f7f7 0%, # f1f1f1 100%); háttérkép: -o-lineáris gradiens (felső, # f7f7f7 0%, # f1f1f1 100%); háttérkép: -ms-lineáris gradiens (felső, # f7f7f7 0%, # f1f1f1 100%); háttérkép: lineáris gradiens (felső, # f7f7f7 0%, # f1f1f1 100%); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); szegély alsó: 1px tömör #bbb;
A napnevek A szöveg sötét szürke színű lesz # 666666 és vékony fehér is lesz text-shadow a nyomott hatást.
.ui-datepicker th text-transform: nagybetűs; betűméret: 6pt; párnázás: 5px 0; szín: # 666666; szöveg-árnyék: 1px 0px 0px #fff; szűrő: dropshadow (color = # fff, offx = 1, offy = 0);
Ekkor a naptár így jelenik meg:
A dátumok stílusa
A naptár dátumai be vannak csomagolva td vagy táblázat adatai. Szóval, beállítjuk a párnázást 0 a td és adj neki egy 1x-es jobb oldali határt.
.ui-datepicker tbody td padding: 0; jobb oldali: 1px szilárd #bbb;
Kivéve az utolsó td, amely nem lesz a megfelelő határ. Ehhez 0-ra állítottuk be a megfelelő szegélyt.
.ui-datepicker tbody td: utolsó gyermek határ-jobb: 0px;
A táblázat sora majdnem ugyanaz lesz. 1px határ alsó része lesz az utolsó sor kivételével.
.ui-datepicker tbody tr border-bottom: 1px szilárd #bbb; .ui-datepicker tbody tr: utolsó gyermek szegély alsó: 0px;
Az alapértelmezett, lebegő és aktív állapot kialakítása
Ebben a lépésben meghatározzuk a dátum lebegését és az aktív stílusokat. Először meghatározzuk a dátum alapértelmezett állapotát a dimenzió megadásával; a dátumszöveg pozíciójának középpontjába állítása, színátmenet és belső fehér árnyék hozzáadása.
.ui-datepicker td span, .ui-datepicker td a kijelző: inline-block; font-súly: félkövér; szöveg-igazítás: központ; szélesség: 30px; magasság: 30px; vonalmagasság: 30px; szín: # 666666; szöveg-árnyék: 1px 1px 0px #fff; szűrő: dropshadow (color = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default háttér: #ededed; háttér: -moz-lineáris gradiens (top, #ededed 0%, #dedede 100%); háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, # ededed), szín-stop (100%, # dedede)); háttér: -webkit-lineáris gradiens (top, #ededed 0%, # dedede 100%); háttér: -o-lineáris gradiens (top, #ededed 0%, # dedede 100%); háttér: -ms-lineáris gradiens (top, #ededed 0%, # 100% -kal); háttér: lineáris gradiens (top, #ededed 0%, # 100%); szűrő: 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); árnyék: 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker - nem választható .ui-state-default háttér: # f4f4f4; szín: # b4b3b3;
Amikor a dátum fölé mozog, enyhén fehér lesz.
.ui-datepicker-calendar .ui-state-hover háttér: # f7f7f7;
Ha a dátum aktív állapotban van, az a következő stílusokkal rendelkezik.
.ui-datepicker-calendar .ui-state-active háttér: # 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); doboz-árnyék: 0px 0px 10px 0px rgba (0, 0, 0, .1); szín: # e0e0e0; szöveg-árnyék: 0px 1px 0px # 4d7a85; szűrő: dropshadow (szín = # 4d7a85, offx = 0, offy = 1); határ: 1px szilárd # 55838f; pozíció: relatív; margin: -1px;
Most a naptárnak sokkal jobbnak kell lennie.
A pozíció rögzítése
Ezen a ponton gondosan nézze meg a dátumot. Ha az első vagy az utolsó oszlopban a dátumra kattint, észre fogod venni, hogy az aktív állapot, amely túl van egy pixeltől a naptár szélétől.
Tehát itt csinálunk néhány kis javítást.
Először csökkentjük a dátum szélességét 29px, és állítsa az utolsó oszlop jobb oldali margóját és az első oszlop bal margóját 0 megfordíthatja -1 képpont az aktív állapothoz korábban beállított margó.
.ui-datepicker-calendar td: első gyermek .ui-state-active szélesség: 29px; margin-left: 0; .ui-datepicker-calendar td: utolsó gyermek .ui-state-active szélesség: 29px; margin-right: 0;
A naptár utolsó sorának dátuma is hasonló lesz.
.ui-datepicker-calendar tr: utolsó gyermek .ui-state-aktív magasság: 29px; margó-alsó: 0;
Most nézzük meg az eredményt. Nos, a naptár most szépnek tűnik, és tökéletesen illeszkedik a tervezési referenciánkhoz. És láthatja a demót, és letöltheti a forrást, hogy megvizsgálja a kódot a kép alatti linkekből.
- Demó
- Letöltés forrása
Bónusz: A naptár kiterjesztése
Nos, ma már sokat tanultunk arról, hogyan lehet létrehozni egy egyéni témát a jQuery UI Datepicker-hez. De nem kellene itt megállnod, mert még mindig sok dolog van, amit ebből a adatrögzítőből lehet bővíteni. A jQuery és a CSS szakértelemtől függően a naptárat úgy emelheti ki, mint ez - szövegbevitel egy átfedő adatrögzítővel.
- Demó
- Letöltés forrása
További irodalom
A jQuery felhasználói felületének további olvasása. A teljes dokumentációt itt olvashatja:
- A jQuery felhasználói felület használatának megkezdése
- Theming jQUery UI
- jQuery UI: Theming API osztályok
Végső gondolatok
Köszönjük, hogy elolvasta és követte ezt a bemutatót, remélem hasznosnak találja. És ha bármilyen visszajelzése van, vagy olyan dolgokat szeretne hozzáadni, amelyek esetleg hiányoznak ebből a bemutatóból, nyugodtan jelölje ki az alábbi megjegyzések részben. Köszönöm mégegyszer).
