A példában egy egyszerű megoldás látható div eltüntetésére és megjelenítésére jQuery segítségével. A feladat az volt hogy egy checkbox bepipálásakor figyelmeztető szöveg jelenjen meg. (A checkbox állapota határozta meg hogy a dátum választó szövegmezők engedélyezett vagy letiltott állapotban jelenjenek meg a weboldalon.)
Két HTML elem szerepel a példában:
- checkbox – azonosítója: DisableDate
- információs panel – azonosítója: DateInfo
Az hogy az információs panel a checkbox mellett jelenjen meg, CSS beállításával történik.
A checkbox melynek állapota vezérli az információs panel megjelenítését, eltüntetését.
<input type="checkbox" class="dateFilter" id="DisableDate" name="DisableDate">szűrés dátum szerint
Az információs panel amit el kell tüntetni illetve meg kell jelenteni, a checkbox bejelölésétől függően.
<div id="DateInfo" title="Bezáráshoz kattintson a feliratra!">Kérjük figyeljen hogy kiválasztott dátumok között maximum 40 év legyen!</div>
A jQuery kódrészlet elején CSS beállítással eltüntetésre kerül a információs panel, hogy az oldal betöltődésekor ne jelenjen meg. Az információs panelre az azonosítóján keresztül hivatkozom: “#DateInfo”
$(document).ready(function(){ $("#DateInfo").css("display","none"); $("#DisableDate").click(function(){ // ha be van pipálva a checkbox if ($("#DisableDate").is(":checked")) { //az információs panel megjelenítése $("#DateInfo").show("fast"); } else { //az információs panel elrejtése $("#DateInfo").hide("fast"); } }); $("#DateInfo").click(function(){ $("#DateInfo").hide("fast"); }); });
A checkbox click eseményéhez kapcsolódik az információs panel megjelenítése illetve eltüntetése.
Ahhoz hogy az információs panelre kattintva, azt el tudja tüntetni a felhasználó, a click eseményére beállítjuk önmaga elrejtését.