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ářů(5651)
Олег - 2018-11-17  09:12:31
 Перезвоните пожалуйста по телефону 8(985)473-83-74 Олег
ProArric - 2018-11-16  14:18:01
 Мы предоставляем качественные услуги прокси-серверов пакетами. Вам требуется стабильный частный прокси для работы в Instagram, Вконтакте,Однокласниках или Авито? Вы интересуетесь букмекерскими ставками или покером? SEO,SMM, просто безопасный серфинг или остальные задачи? В том случае вы по адресу.


Мы предлагаем анонимные, элитные, прокси-сервера с лучшей круглосуточной поддержкой. Данные прокси подходят для любых программ,сервисов, социальных сетей, онлайн игр и не только. Авторизация по логин - паролю или IP адресу.


Стремительные прокси ipv4 и ipv6 (до 100 мбит/с) гарантируют стабильную работу. Потребны различные подсети, у нас их достаточно. Так же вы сможете выбрать тип протокола HTTP/SOCKS.



[url=https://proxywhite.com/]прокси сервер купить[/url]
Verahap - 2018-11-07  19:05:05
 ГОРЯЩИЕ ТУРЫ!!! Успейте забронировать тур по минимальной цене

[img]http://3.ak3.ru/w/goryashchie/foto/15.jpg[/img]


Гoрящие туры – этo турпoeздки, время рeaлизaции кoторых вскорe иcтекает. Здecь дeйcтвуeт тa же cистeмa, чтo и в супермaркетах – чтобы продать товaр, cнижaeтcя цeнa, причем инoгдa существeннo – дo 50% oт первоначaльной. Гoрячие туры ничем нe отличaютcя от oбычных прeдложений, кромe выгоды, кoторую вы при этом пoлучaeте – тот же пeрeлет, oтeль, сервиc и экcкурсиoнная прогрaммa. А это знaчит, чтo низкая cтоимocть вoвсe нe говoрит о некачествeнном прoдуктe (в oтличиe oт тех же cупермаркeтов). И сcглaшаться на мeньшее лишь пoтoму, что поeздка обoшлась вaм в меньшую сумму, нe придется! Тaкиe прeдложeния идeальны для молодых, полных сил и энeргии, умеющих пaкoвaть чeмодaн зa 15 минут и всегда гoтoвых к нoвым впeчaтлeниям и приключeниям. Тех, для кoгo поводoм для фaнтaстичеcкой пoездки можeт cтать жeланиe «выгулять» нoвый купaльник или иcпытать новую видeокамeру, причeм cдeлать этo ужe зaвтра! A нaличие открытой шeнгенcкoй визы значитeльно рacширит выбoр нaправлений ваших незaбывaeмых и при этoм вполнe доступных путeшeствий. Дoверьтe пoдбoр гoрящих турoв прoвeрeннoму турoпeрaтору и oформляйте путевку в рeжиме oнлайн прямo нa сaйте. Оплaту можнo произвoдить бaнковcкой картoй в защищеннoм и бeзопacнoм рeжиме нашeго портала, a дoкументы мы пришлем нa ваш электронный aдрeс. Eсли вы гoтовы улeтеть в любoй момeнт, выбирaйте горящиe туры – сaмoe разумное рeшение для тeх, кто не любит откладывaть удoвольствие на потoм!


[url=http://3.ak3.ru/hot][img]http://3.ak3.ru/w/goryashchie/cnopka/10.png[/img]
[/url]

[url=http://3.ak3.ru/x]Тру в Финляндию[/url]
[url=http://3.ak3.ru/t]Тру в Италию[/url]
[url=http://3.ak3.ru/q]Тру в Турцию[/url]
[url=http://3.ak3.ru/y]Тру в Германию[/url]
JamesFup - 2018-11-02  21:32:59
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-02  21:32:57
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-02  00:52:25
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-02  00:26:51
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  23:09:29
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
Ctlsyry - 2018-11-01  22:35:35
 Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
- Первый заработок в течении 60 минут.
- Стабильный доход 24 часа в сутки.
- Поступление денег без задержек.
- Для России, стран СНГ и Европы.
- Без вложений и установки ПО.
- Специально для новичков и людей без опыта.

Более подробная информация у нас на блоге: > https://prostowmr.blogspot.com/
JamesFup - 2018-11-01  21:56:42
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
Agaxlfx - 2018-11-01  21:45:18
 Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
- Первый заработок в течении 60 минут.
- Стабильный доход 24 часа в сутки.
- Поступление денег без задержек.
- Для России, стран СНГ и Европы.
- Без вложений и установки ПО.
- Специально для новичков и людей без опыта.

Ознакомтесь с условиями на нашем блоге: > https://prostowmr.blogspot.com/
JamesFup - 2018-11-01  20:20:10
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  20:04:45
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  19:58:22
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  19:55:04
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  19:55:02
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  19:32:57
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  19:32:46
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  15:50:05
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
JamesFup - 2018-11-01  15:43:30
 Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b] [url=http://seoprofisional.ru/index.php?route=product/category&path=75][b]Аренда выделенных серверов по приемлимым ценам[/b][/url] Раскрутка сайта под ключ
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29] [30] [31] [32] [33] [34] [35] [36] [37] [38] [39] [40] [41] [42] [43] [44] [45] [46] [47] [48] [49] [50] [51] [52] [53] [54] [55] [56] [57] [58] [59] [60] [61] [62] [63] [64] [65] [66] [67] [68] [69] [70] [71] [72] [73] [74] [75] [76] [77] [78] [79] [80] [81] [82] [83] [84] [85] [86] [87] [88] [89] [90] [91] [92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103] [104] [105] [106] [107] [108] [109] [110] [111] [112] [113] [114] [115] [116] [117] [118] [119] [120] [121] [122] [123] [124] [125] [126] [127] [128] [129] [130] [131] [132] [133] [134] [135] [136] [137] [138] [139] [140] [141] [142] [143] [144] [145] [146] [147] [148] [149] [150] [151] [152] [153] [154] [155] [156] [157] [158] [159] [160] [161] [162] [163] [164] [165] [166] [167] [168] [169] [170] [171] [172] [173] [174] [175] [176] [177] [178] [179] [180] [181] [182] [183] [184] [185] [186] [187] [188] [189] [190] [191] [192] [193] [194] [195] [196] [197] [198] [199] [200] [201] [202] [203] [204] [205] [206] [207] [208] [209] [210] [211] [212] [213] [214] [215] [216] [217] [218] [219] [220] [221] [222] [223] [224] [225] [226] [227] [228] [229] [230] [231] [232] [233] [234] [235] [236] [237] [238] [239] [240] [241] [242] [243] [244] [245] [246] [247] [248] [249] [250] [251] [252] [253] [254] [255] [256] [257] [258] [259] [260] [261] [262] [263] [264] [265] [266] [267] [268] [269] [270] [271] [272] [273] [274] [275] [276] [277] [278] [279] [280] [281] [282] [283] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.