Příklady na jQuery (část 3).
Author: Dmitry Burobin
V minulých článkach jsme rozebrali základní funkce a možnosti jQuery, a měli byste už vědět, jak napsat jednoduchou aplikaci. Takže v tomto článku se podívame na složitější příklady. Určitě byste měli vědět něco o kaskádních stylech, protože jQuery selektory jsou závisle na CSS.
V článku budu ukazovat jenom jQuery kód. CSS a HTML najdete, když se podívate na ukázku ke konkrétnimu příkladu, tudiž na zdrojový kód stránky!!!
2) Selektory, Animace a Ajax – jQuery příklady (část 2).
3) Příklady na jQuery (část 3).
4) jQuery menu (část 4).
5) jQuery pro začátečníky. Ajax - (část 5).
Vysouvací panel.
Začneme příkladem vysouvacího panelu, který se bude hýbat nahoru a dolu při stisknutí tlačítka.
.
Realizujeme to následovně, při kliknuti na odkaz, budeme přepínat jeho třídu mezi active a btn_slide, a panel s id panel se bude vysouvat a skrývat (třída active mění pozici pozadí, viz. CSS kód).
jQuery kód vypada takto:
$(document).ready(function(){
//DOM je pripraven
$(".btn-slide").click(function(){
//pri kliknuti na odkaz s tridou btn-slide
$("#panel").slideToggle("slow");
//prvek s id panel se vysune nebo skryje
$(this).toggleClass("active");
//priradi prvku s id panel tridu active jestli ji nema
//a jestli ma tak ji odstrani
});
});
Magické zmizení.
Na tomto příkladu se podívame, jak jednoduše a hezký rozpustit prvky.
Když klikneme na obrázek [img class="delete"], najde se rodičovský prvek [div class="pane"] a jeho průzračnost se bude pomalu měnit od 100% do 0 (opacity = hide).
$(document).ready(function(){
//DOM je pripraven
$(".pane .delete").click(function(){
//pri kliknuti na obrazek s tridou delete
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
//najdi rodicovsky prvek, v nasem pripade, najdi div s tridou pane u ktereho
//jste zmacknul odstranit a schovej ho
});
});
Spojitá animace.
Teď trochu složitější příklad, ale Vám umožní líb pochopit jQuery. Jen několik řádku donutí čtverec hýbat se, měnit rozměry a průzračnost.
Na tomto příkladu je krásně vidět, jak můžeme na jeden selektor pověsit několik funkci, v našém případě animaci.
$(document).ready(function(){
//DOM je pripraven
$(".run").click(function(){
//pri kliknuti na prvek s tridou run
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
//nas ctverec zmeni pruzracnost a posune se doprava o 400px za 1200ms
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
//pak se jeho pruzracnost zase zmeni a posune se dolu
//a zmeni se jeho rozmery, pomalu
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
//pak se zase zmeni pruzracnost, posune se o 400px
//doprava a zmeni si rozmery, pomalu
.animate({top: "0"}, "fast")
//posune se nahoru, rychle
.slideUp()
//jako by se zavre
.slideDown("slow")
//rozbali se, pomalu
return false;
//vracime false aby prohlizec nepresel na odkaz
});
});
Harmonika #1
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
Takže, jak je to vlastně realizované.
- První řádek přidá třídu active prvnímu prvku [h3] uvnitř div-u s třídou accordion ( třída active odpovída za pozici pozadí obrázku – ikonky s šipkou).
- Ve druhém řádku schováváme všechny ne první prvky [p] uvnitř div-u s třídou accordion.
- Jakmile nastané kliknutí na záhlaví [h3], na následující v něm prvek [p] bude použit efekt slideToggle.
- Pak na všechny ostatní prvky [p] bude použit efekt slideUp(zavřou se).
- A poslední věc je, že změníme třídu záhlaví na active, pak hledáme všechny ostatní záhlaví [h3] a odstraňujeme u nich třídu active. Jednoduché ne? :-)
Harmonika #2
Tento příklad je velice podobný tomu předchozimu, akorat se líši tím, že řekneme jaký blok (panel) bude otevřený při načtení stránky.
V CSS máme řečeno, že všechny prvky [p] se nemají zobrazovat, tzn. display:none. Teď potřebujeme otevřít třetí panél. Proto můžeme napsat toto $(“.accordion2 p").eg(2).show(), eq znamená rovna se. Pamatujte si, že indexování začína od nuly.
$(document).ready(function(){
$(".accordion2 h3").eq(2).addClass("active");
$(".accordion2 p").eq(2).show();
$(".accordion2 h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
Animace pseudotřídy odkazu hover #1
Na tomto příkladu Vám ukážu velice pohlednou animaci pro hover.
Když přejížděte myší prvek seznamu (mouseover), začíname hledat další prvek [em] a měnít jeho průzračnost a polohu.
$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
Animace pseudotřídy odkazu hover #2
Tento příklad je trošku složitější, pro formování nápovědy použijeme atribut linktitle
Zaprvé přidáme tég [em] do každého prvku [a]. Když nastáne událost mouseover vezmeme si text z atributu thetitle a uložíme ho do proměnné hoverText, pak tento text vložíme mezi tégy [em].
$(document).ready(function(){
$(".menu2 a").append("<b>[em]</b><b>[/em]</b>");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
Skládací panely.
Teď dame dohromady minulé příklady a uděláme si několik skládacích panelů.
- Schováme všechny prvky div s třídou message_body po pátem.
- Pak schováme všechny prvky [li] zase po pátem.
- Kliknutí na prvek p s třídou message_head vyvolá metodu slideToggle pro následující prvek div s třídou message_body
- Kliknutí na prvek a s třídou collapse_all_message vyvolá metodu slideUp pro všechny div s třídou message_body
- Kliknutí na prvek a s třídou show_all_message schovává prvek, a zobrazuje a s třídou show_recent_only, taký vyvolává metodu slideDown pro všechny [li] po pátem.
- Kliknutí na prvek a s třídou show_recent_only schovává prvek, a zobrazuje a s třídou show_all_message, taký vyvolává metodu slideUp pro všechny [li] po pátem
$(document).ready(function(){
//hide message_body after the first one
$(".message_list .message_body:gt(0)").hide();
//hide message li after the 5th
$(".message_list li:gt(4)").hide();
//toggle message_body
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});
//collapse all messages
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
return false;
});
//show all messages
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});
//show recent messages only
$(".show_recent_only").click(function(){
$(this).hide()
$(".show_all_message").show()
$(".message_list li:gt(4)").slideUp()
return false;
});
});
Imitace Backendu Wordpress.
Myslím si, že mnozi z Vás se potkávali s administrativní části wordpress, přesnějí s laděním komentářů. Zkusme udělat něco podobného. Pro animaci pozadí budeme potřebovat plugin jquery.color, který stáhnete odsud a vložite do hlavíčky html souboru, stejně jako knihovnu jQuery.
- Přidáme třídu alt ke každému sudému prvku div s třídou pane(tato třída mění barvu pozadí prvku)
- Kliknutí na prvek a s třídou btn-delete iniciuje vzniknutí hlášení (alert), též vyvolá animaci pozadí a průzračnosti (backgroundColor a opacity) pro div s třídou pane.
- Kliknutí na prvek a s třídou btn-unapprove vyvolává animaci pozadí u div s třídou pane (barva se mění na žlutou a zpět) a přidává třídu spam.
- Kliknutí na prvek a s třídou btn-approve vyvolává animaci pozadí u div s třídou pane (barva se mění na zelenou a zpět) a odstraňuje třídu spam.
- Kliknutí na prvek a s třídou btn-spam vyvolává animaci pozadí u div s třídou pane (barva se mění na červenou) a mění parametr opacity na hide.
$(document).ready(function(){
$(".pane:even").addClass("alt");
$(".pane .btn-delete").click(function(){
alert("This comment will be deleted!");
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
$(".pane .btn-unapprove").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.addClass("spam")
return false;
});
$(".pane .btn-approve").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.removeClass("spam")
return false;
});
$(".pane .btn-spam").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
Fotogalerie.
Jednoduchý příklad realizaci fotogalerii bez znovunačtení stránky.
V prvním kroku přidáme tég [em] do záhlaví [h2].
Po kliknutí na obrázek v p s třídou thumbs:
- Ukládáme hodnotu atributu href do proměnné largePath
- Ukládáme hodnotu atributu title do proměnné largeAlt
- Nahrazujeme v prvku img s třídou largeImg hodnotu atributu src a alt hodnotami z proměnných largePath a largeAlt.
- Taký přiřazujeme prvku h2 em hodnotu largeAlt.
$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false;
});
});
Na tomto bych ukončil dnešní článek, krásny zbytek dne. Velice brzo bude pokračování :-)
Tu ještě máte archiv se všema příklady jquery_priklady.zip
Zdroj: http://webdesignerwall.com
