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ářů(44)
Jeffpoonia - 2017-11-16  18:25:16
 Amoxicillin Flavor [url=http://tadalaf20mg.com ]cialis[/url] Mexico Pharmices To Order Meticorton Alli Diet Pill Mexico
Jeffpoonia - 2017-11-16  18:25:14
 Amoxicillin Flavor [url=http://tadalaf20mg.com ]cialis[/url] Mexico Pharmices To Order Meticorton Alli Diet Pill Mexico
Jeffpoonia - 2017-11-16  18:25:12
 Amoxicillin Flavor [url=http://tadalaf20mg.com ]cialis[/url] Mexico Pharmices To Order Meticorton Alli Diet Pill Mexico
Jeffpoonia - 2017-11-16  18:25:09
 Amoxicillin Flavor [url=http://tadalaf20mg.com ]cialis[/url] Mexico Pharmices To Order Meticorton Alli Diet Pill Mexico
DavidAstex - 2017-11-15  10:03:34
 Some people, especially those running on busy daily schedules tend to use the pills to help maintain weight since they can not afford to follow all the diet programs. This is not advised. It is recommended that one seek advice from a professional in this field before using the pills. This can save one from many dangers associated with the misuse.

The diet pills should always be taken whole. Some people tend to divide the pills to serve a longer period of time. This is not advised and can lead to ineffectiveness. If it is required that one takes a complete tablet, it means that a certain amount of the ingredients are required to achieve the desired goal. It is also recommended that one does not crush the pill and dissolve it in beverages. Chemicals found in beverages have the potential of neutralizing the desired nutrients in the pill thereby leading to ineffectiveness. The best way to take the tablets is swallowing them whole with a glass of water.

The diet pills speed up the metabolic processes. This is the key factor that leads to the bu
ing of all the fats in the body. This means that one passes out lots of urine, which subsequently leads to dehydration. It is imperative that the user take lots of water round the clock. This will help curb dehydration, which can lead to health problems. In addition to that, water offers the required medium for the function of the nutrients and elimination of the fats.

When buying the review of diet pills, it is imperative that one gets the most recommended dose. People tend to compromise the quality and effectiveness of the tablets due to the variation in cost. The low priced pills depict poor quality, which means their effectiveness is not reliable. Some have also been found to cause health problems. The dose should also be taken as recommended. Over dose will not speed up the process but rather lead to complication. This will increase risk of side effects. If the taking of the pill is forgotten, do not take more to compensate for the lost time.

The diet plan enclosed with the diet pills has also to be followed. According to the requirements, the termination of the diet must be done even with no results. This means your body is irresponsive.
Ronweix - 2017-11-07  20:33:23
 Strep Throat Keflex Otc Permethrin Otc Viagra A Casa [url=http://buyvarden.com]compare viagra to cialis and levitra[/url] Where Can You Buy Generic Viagra Online Propecia No Prescription
Ronweix - 2017-11-07  20:33:22
 Strep Throat Keflex Otc Permethrin Otc Viagra A Casa [url=http://buyvarden.com]compare viagra to cialis and levitra[/url] Where Can You Buy Generic Viagra Online Propecia No Prescription
Ronweix - 2017-11-07  20:33:21
 Strep Throat Keflex Otc Permethrin Otc Viagra A Casa [url=http://buyvarden.com]compare viagra to cialis and levitra[/url] Where Can You Buy Generic Viagra Online Propecia No Prescription
Ronweix - 2017-11-07  20:33:20
 Strep Throat Keflex Otc Permethrin Otc Viagra A Casa [url=http://buyvarden.com]compare viagra to cialis and levitra[/url] Where Can You Buy Generic Viagra Online Propecia No Prescription
Ronweix - 2017-11-05  15:03:02
 Coumadin And Keflex Propecia Kaufen Forum Generic For Amoxicillin [url=http://leviprices.com]cheapest levitra plus[/url] Cialis 5 Mg Precio Vademecum Aciphex Generic Release Date Amoxil Informations
Ronweix - 2017-10-27  22:41:13
 Canadianhealthandcaremallviagra [url=http://ordercheapvia.com]viagra online prescription[/url] Cialis Para Impotencia Effects Of Alcohol On Amoxicillin
Ronweix - 2017-10-27  22:41:12
 Canadianhealthandcaremallviagra [url=http://ordercheapvia.com]viagra online prescription[/url] Cialis Para Impotencia Effects Of Alcohol On Amoxicillin
Ronweix - 2017-10-27  22:41:11
 Canadianhealthandcaremallviagra [url=http://ordercheapvia.com]viagra online prescription[/url] Cialis Para Impotencia Effects Of Alcohol On Amoxicillin
Ronweix - 2017-10-27  22:41:10
 Canadianhealthandcaremallviagra [url=http://ordercheapvia.com]viagra online prescription[/url] Cialis Para Impotencia Effects Of Alcohol On Amoxicillin
Ronweix - 2017-10-24  23:43:48
 Liquid Cialis For Sale Buy Levitra 10mg [url=http://cheapviapills.com]viagra[/url] Nolvadex En Pharmacie Buy Generic Levitra From India Online Kamagra Same Day Delivery London
Ronweix - 2017-10-16  20:59:37
 Precio De La Propecia Farmacia Super Active Viagra Propecia Depresion [url=http://buyvarden.com]vardenafil[/url] Viagra Receta Medica Nebenwirkungen Cialis Forum
Ronweix - 2017-10-16  20:59:36
 Precio De La Propecia Farmacia Super Active Viagra Propecia Depresion [url=http://buyvarden.com]vardenafil[/url] Viagra Receta Medica Nebenwirkungen Cialis Forum
Ronweix - 2017-10-16  20:59:35
 Precio De La Propecia Farmacia Super Active Viagra Propecia Depresion [url=http://buyvarden.com]vardenafil[/url] Viagra Receta Medica Nebenwirkungen Cialis Forum
Ronweix - 2017-10-16  20:59:34
 Precio De La Propecia Farmacia Super Active Viagra Propecia Depresion [url=http://buyvarden.com]vardenafil[/url] Viagra Receta Medica Nebenwirkungen Cialis Forum
Ronweix - 2017-10-13  19:00:23
 Photo Propecia Finasteride [url=http://cheapvia25mg.com]viagra[/url] Cialis Tadalafil Dosis Levitra Is Cephalexin Oral Suspension Dog Dosing
[1] [2] [3] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.