Příklady na jQuery (část 3).

 2012-01-27 00:00:00
 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!!!

Vysouvací panel.

Začneme příkladem vysouvacího panelu, který se bude hýbat nahoru a dolu při stisknutí tlačítka.

. vysouvaci_panel

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).

Úkazka!

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.

magicke_zmizeni

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).

Úkazka!


$(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.

animace

Úkazka!


$(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
    }); 
});

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.

Harmonika #1

harmonika


$(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? :-)

Úkazka!

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");
    });
 
});

Úkazka!

Animace pseudotřídy odkazu hover #1

Na tomto příkladu Vám ukážu velice pohlednou animaci pro hover.

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");
    });
});

Úkazka!

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

hover

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");
    });
 
});

Úkazka!

Skládací panely.

Teď dame dohromady minulé příklady a uděláme si několik skládacích panelů.

skladaci_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;
    });
 
});

Úkazka!

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.

backend_wordpress

  • 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;
    });
});

Úkazka!

Fotogalerie.

Jednoduchý příklad realizaci fotogalerii bez znovunačtení stránky.

photogallery

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({ srclargePathaltlargeAlt });
 
        
$("h2 em").html(" (" largeAlt ")"); return false;
    });
  
 
});

Úkazka!

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

Systém Orphus
Napište komentář.
Celkem komenrářů(0)