Slevový týden - Květen Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
30 % bodů zdarma na online výuku díky naší Slevové akci!

Jednoduchá Collapsible v JavaScripte s knižnicou jQuery

Dnes si ukážeme ako urobiť jednoduchú Collapsible pomocou jQuery. Collapsible je časť webovej prezentácie, ktorú možno rozbaliť a zbaliť. Tá naša bude vyzerať takto:

Zatvorená Collapsible v jQuery
Otvorená Collapsible v jQuery

Ako prví vec si musíme vytvoriť html (index.html) dokument a následne kostru html dokumentu. Do jeho hlavičky pridáme pár základných vecí ako sú ikonky (font awesome), aby sme si mohli pridať príhodnú šípku, ďalej JavaScript knižnicu jQuery a tiež náš css súbor, ktorý čoskoro vytvoríme.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>collapsible</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
    <section>
        <!-- Zde přidáme naší collapsible -->
    </section>
</body>
</html>

Teraz si vytvoríme základné css (style.css) v adresári css. Už ho nemusíte importovať, to sme už urobili skôr.

* {
    font-family: arial;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
body {
    background-color: #eee;
}
section {
    width: 800px;
    margin: 50px auto;
}
.clear {
    clear: both;
}

Teraz sa vrhneme do samotnej html časti. Do Collapsible pridáme tag article a doň nadpis "h2", ktorý bude mať pár atribútov a tieto triedy: nadpis-article, Collapsible-article a tento event: onclick = "Collapsible ( 'nase_collapsi­ble')". Potom ho použijeme ako názov a zároveň ako tlačidlo k našej Collapsible. Potom do h2 vložíme ikonu, ktorá bude mať tiež pár atribútov. Ide o tag "i" s triedami: Collapsible-fa, fa, fa-chevron-down. Ďalej bude mať id: Collapsible-ikona-nase_collapsible. Pridáme div, ktorý bude niesť náš obsah a ktorý sa bude skrývať a odkrývať. Bude mať len 2 atribúty a to triedu a id. Triedy: obsah-article Collapsible, id: Collapsible-nase_collapsible. Do tohto divu vložíme nejaký testovací text a ešte nad text dáme div s triedou clear.

<article>
   <h2 class="nadpis-article collapsible-article" onclick="collapsible('nase_collapsible')">Nadpis collapsible <i id="collapsible-ikona-nase_collapsible" class="collapsible-fa fa fa-chevron-down"></i></h2>
    <div class="obsah-article collapsible" id="collapsible-nase_collapsible">
        <div class="clear"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel porttitor ipsum. Cras rutrum vitae urna ac condimentum. Fusce blandit non velit quis viverra. Quisque quis maximus nulla. Nulla nec varius nisi. Nam nec ex eu neque viverra molestie. Etiam dapibus ultrices nunc, in porttitor urna cursus vel. Curabitur euismod sed massa eu rhoncus. Phasellus facilisis felis sed venenatis pharetra. Phasellus vel ultrices nunc.</p>
    </div>
</article>
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Ďalej si do css pridáme niekoľko vecí, aby nám Collapsible dobre fungovala a to tieto:

collapsible-article {
    cursor: pointer;
}
.collapsible {
    display: none;
}
.collapsible-fa {
    float: right;
    margin-right: 15px;
}
article {
    float: left;
    background-color: white;
    width: 800px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
section {
    width: 800px;
    margin: 50px auto;
}
.nadpis-article {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 20px;
    width: 100%;
    float: left;
    text-align: center;
    font-family: arial;
}
.obsah-article {
    width: 750px;
    text-align: justify;
    word-wrap: break-word;
    margin: 0px auto;
}

Teraz si vytvoríme JavaScript (collapsible.js) súbor v adresári js. V ňom si vytvoríme dve základné funkcie. Prvou je funkcia, ktorá sa zavolá po kliknutí na Collapsible. Keď jej zavoláme, vyplníme id Collapsible, ktorú práve voláme. U nás som zvolil id nase_collapsible. Funkcia sa bude volať veľmi jednoducho a to Collapsible.

Do tejto funkcie si zvolíme pár premenných a to Collapsible, ktorá bude mať hodnotu $ ( '# collapsible-' + id), collapsible_fa s hodnotou $ ( '# Collapsible-ikona-' + id). Ďalej si dáme jednoduchú podmienku, ktorá bude kontrolovať či je naša Collapsible aktívna alebo nie. Ak Collapsible nie je aktívna, aplikuje sa animácia collapsible.sli­deDown ().

Ďalej použijeme našu funkciu, ktorú vám popíšem neskôr. Táto funkcia slúži na otočenie našej ikony v nadpise AnimaceOtoceni (collapsible_fa, 360, 180). Tiež našej Collapsible pridáme triedu aktivni-Collapsible, collapsible.ad­dClass ( 'aktivni-Collapsible'), aby náš script vedel či je Collapsible aktívny alebo nie. Teraz sa vrátime k podmienke či je Collapsible aktívny, teda či bude aktívny. Aplikujeme tento postup: collapsible.slideUp (), AnimaceOtoceni (collapsible_fa, 360, 180), collapsible.re­moveClass ( 'aktivni-Collapsible'). Nasledovne bude vyzerať náš code.

function collapsible(id) {
    var collapsible = $('#collapsible-' + id);
    var collapsible_fa = $('#collapsible-ikona-' + id);

    if (collapsible.hasClass('aktivni-collapsible') == true) {
        collapsible.slideUp();
        AnimaceOtoceni(collapsible_fa, 360, 180);
        collapsible.removeClass('aktivni-collapsible');
    } else {
        collapsible.slideDown();
        AnimaceOtoceni(collapsible_fa, 180, 360);
        collapsible.addClass('aktivni-collapsible');
    }
}

Teraz si urobíme sľúbenú funkciu na otáčanie ikonky. Funkcia sa bude volať AnimaceOtoceni () a pri volaní uvedieme id našej ikonky, z akého uhla sa má ikona otočiť, a do akého uhla sa má otočiť. Funkcia bude vyzerať takto.

function AnimaceOtoceni(id, d, s) {
    $({deg: s}).animate({deg: d}, {
        duration: 500,
        step: function(ted){
            id.css({
                 transform: "rotate(" + ted + "deg)"
            });
        }
    });
}

Do html si teraz pridáme náš js súbor nad tag.

</body>

.

Ďakujem za vašu pozornosť, to je pre dnešok všetko budem rád za komentáre. Všetky zdrojové kódy sú dostupné k stiahnutiu.


 

Stiahnuť

Stiahnuté 132x (478.07 kB)
Aplikácia je vrátane zdrojových kódov v jazyku javascript

 

 

Článok pre vás napísal Patrik Smělý
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor miluje filosofii, sci-fi, technologie, hry a hlavně svobodu. Aktivně se věnuje programování, designu, 3D grafice, správě sítí a trochu méně hardwaru. Mimo technologické zaměření se velice zajímá o politiku a psychologii.
Všetky články v sekcii
Hotová riešenie v JavaScripte
Aktivity (1)

 

 

Komentáre

Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:4.3.2015 13:43

Inu, dalo by se to udělat lépe.

  1. Obecně doporučuji všechno co souvisí s CSS dávat do CSS. V tvém případě to znamená, že nebudeš muset animovat změnu rotace v JS, ale jen změníš třídu a CSS si to vyřeší samo.

Je možné, že ti to kvůli tomu půjde jen v CSS3, ale řekněme si to narovinu - kdo dnes nemá prohlížeč s podporou CSS3 (?) a je opravdu nutné, aby se animace provedla i ve starých prohlížečích?
http://caniuse.com/#…

  1. Když už využíváš jQuery knihovnu, využívej jí na plno. Tedy např. pro tvůj kód níže:
if (collapsible.hasClass('aktivni-collapsible') == true) {
        collapsible.slideUp();
        AnimaceOtoceni(collapsible_fa, 360, 180);
        collapsible.removeClass('aktivni-collapsible');
    } else {
        collapsible.slideDown();
        AnimaceOtoceni(collapsible_fa, 180, 360);
        collapsible.addClass('aktivni-collapsible');
    }

Kód se dá perfektně zminimalizovat na 2 řádky.

collapsible.slideToggle();
collapsible.toggleClass('aktivni-collapsible');
  1. Odeber události z HTML a raději vytvoř jQuery handlery. Kódy tím tak separuješ a vytvoříš lepší strukturu.
jQuery(".trida").on("click", function(){
  ... obsah ...
});
  1. Uvádíš import FA zapsán způsobem níže, ale jsem si jistý, že ti tam chybí http:, nebo ne? :)
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Editované 4.3.2015 13:45
Odpovedať
4.3.2015 13:43
Student FIT ČVUT. In love with Dart &...
Avatar
Patrik Smělý
Tým ITnetwork
Avatar
Odpovedá na Honza Bittner
Patrik Smělý:4.3.2015 13:54

Děkuji za tvůj názor

  1. v tom máš pravdu, ale když je to v sekci javascript tak jsem to chtěl udělat v javascriptu.
  2. na to platí 1.
  3. v tom máš pravdu.
  4. ne je to dobře ukázku že je to funkční je zde view-source:http://sogocze.cz/ (11 řádek).

Příště se vše pokusím řešit lépe :).

 
Odpovedať
4.3.2015 13:54
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Patrik Smělý
Tým ITnetwork
Avatar
Odpovedá na Honza Bittner
Patrik Smělý:4.3.2015 16:30

Ještě oprava, nějak jsem přehlídnul to toggle. No uznávám že toggle by možná bylo lepší řešení.

 
Odpovedať
4.3.2015 16:30
Avatar
Odpovedá na Honza Bittner
Vít Cigánek:3.12.2015 18:43

Mi přijde, že je tam hodně kodu less s scss navíc exportovaný font... Musí tam všechno být, když chci udělat jenom rotaci šipky a rozklik toho článku.

 
Odpovedať
3.12.2015 18:43
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 4 správy z 4.