Naptár - Naptár az Ön weboldalán
Naptár - Naptár az Ön weboldalán
Ma szeretnénk megosztani veletek a koncepció egy rugalmas, testre szabható naptár. Létrehoztunk egy jQuery-plugin a naptár, és ebben a cikkben látható egy pár példa arra, hogyan lehet használni. Létrehozása céljából a plug-in volt, hogy a legjobb helyen, a naptár, mint a kis és a nagy képernyők és folyamatosan a „lebegő” naptár szerkezetét, amikor csak lehetséges.
Felhívjuk figyelmét, hogy a demo példák fog működni, mint a kizárólag a támogató böngészők az új funkciók a CSS3, az itt használt az első helyen számított ().
Naptár alapja a két szép példát talált Dribbble:
- Day - a legszebb naptár alkalmazás iPhone Toby Negele
- Naptár Tomas Gajar
A bővítmény, csak létre kell hozni egy konténer osztály „fc-naptár-tartály”:
A bővítmény lehet hivatkozni az alábbiak szerint:
$ # 40; '#calendar' # 41;. calendario # 40; # 41; ;
Ezután dugó teremt naptár jegyekkel felépítése a következő:
Naptár áll egy sapka egy listát a hét napjainak és egy tartályt a sor a hónap napjait. Minden „sejt” tartalmazni fogja a dátumot és a hét napját, és mi fogjuk irányítani a sor magasságát, hogy megteremti a szükséges osztályt a tartály (négy, öt vagy hat sor). Stílusok naptári alapértelmezés szerint határozza meg calendar.css.
Megjegyezzük, hogy a sejt, amely tartalmazza a tartalom / esemény lesz az alábbiak szerint:
14
házasodik
Szintén fontos megjegyezni, hogy a nap a hét minden egyes cella alapértelmezés szerint rejtett, mert van egy kalap a naptár a hét napjai. Azok, amelyek megjelennek a cellában, amikor használjuk médialekérdezések, változtatni az elrendezés a naptár a függőlegeshez képest. Itt megmutatjuk a nap a hét minden cellában.
Egyértelmű, hogy a naptár / kell bemutatni, mint egy asztal, de mivel bizonyos különbségek a renderelés táblázatok böngészők között (különösen IE9), úgy döntöttünk, hogy nem használja azt. Természetesen beállíthatja a plugin, hogy megjelenítse a táblázatban.
Fontos része létrehozza a „lebegő” a naptári rácsozatú cellastílusokat:
fc-négy-sorok .fc-sorban # 123;
magasságot. 25%;
# 125;
fc-öt-sorok .fc-sorban # 123;
magasságot. 20%;
# 125;
fc-hat-sorok .fc-sorban # 123;
magasságot. 16,66%;
magasságot. -moz-calc # 40; 100% / 6 # 41; ;
magasságot. -webkit-calc # 40; 100% / 6 # 41; ;
magasságot. calc # 40; 100% / 6 # 41; ;
# 125;
fc-naptár .fc-row> div.
.fc-naptár .fc-head> div # 123;
lebegnek. bal oldalon;
magasságot. 100%;
szélessége. 14,28%; / * 100% / 7 * /
szélessége. -moz-calc # 40; 100% / 7 # 41; ;
szélessége. -webkit-calc # 40; 100% / 7 # 41; ;
szélessége. calc # 40; 100% / 7 # 41; ;
helyzetbe. relatív;
# 125;
Így, definiáljuk a naptári különböző magasságú függően a sorok számát használó Calc (). mi egy olyan szélessége egyenlő 100 osztva 7 belső egységek - Calc (100% / 7).
Az alábbi (alapértelmezett) beállítások:
// inicializálja a naptári hónapra (1-12). Alapesetben a jelenlegi.
hónapban. null.
// inicializálja a naptári évre. Alapesetben a jelenlegi.
évben. null.
// választhat értékek és options.weeks options.weekabbrs
displayWeekAbbr. hamis.
// választhat értékek és options.months options.monthabbrs
displayMonthAbbr. hamis.
// Az első nap a héten
// 0 - 1. vasárnap - hétfő. 6 - szombat
STARTIN. 1.
// callback-funkció kerül meghívásra, ha rákattint a sejt
// $ el - egy cella
// $ tartalom - a tartalom a cellában
// dateProperties - egy objektumot a következő paraméterekkel:
// nap. A nap száma,
// hónapban. száma, a hónap 1-12,
// MONTHNAME. Íme a hónap options.months,
// évben. év
// hétköznap. a hét napja, 0-6,
// weekdayname. hétköznap neve options.weeks
onDayClick. függvény # 40; $ El. $ Tartalom. dateProperties # 41; # 123; return false; # 125;
A következő nyilvános eljárások is rendelkezésre állnak:
// visszaadja az évben, amelyek jelenleg
getYear # 40; # 41;
// visszaadja a hónapban, amelyek jelenleg (1-12)
getMonth # 40; # 41;
// visszaadja a hónap nevét, amelyek jelenleg
getMonthName # 40; # 41;
// visszaadja a tartalmát a „nap” a sejt
getCell # 40; nap # 41;
// beállítja az adatokat a naptár. Egyesíti a tartalmát „caldata” azokkal, amelyek már telepítve (ha van ilyen)
setData # 40; caldata # 41;
// megjeleníteni a naptár az aktuális év és hónap
// hónap 1-12
gotoNow # 40; visszahívás # 41;
// megjeleníteni egy naptári hónapra „hónap”, és az év „év”
// hónap 1-12
goto # 40; hónapban. évben. visszahívás # 41;
// visszaadja az előző hónapban a naptárban
gotoPreviousMonth # 40; visszahívás # 41;
// visszaadja az előző naptári évben
gotoPreviousYear # 40; visszahívás # 41;
// visszaadja a következő hónapban a naptárban
gotoNextMonth # 40; visszahívás # 41;
// visszaadja a következő évben a naptári
gotoNextYear # 40; visszahívás # 41;
Használhatja a SetData funkciót. felvenni a tartalom a naptár. Hogyan fog kinézni láthatjuk a demo példa.
Alapvető stílusok, mint már említettük, vannak meghatározva calendar.css fájlt, de a példákban láthatjuk, hogyan lehet megváltoztatni stílusok, és add hozzá a CSS fájlban.