Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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 - Hotová riešenie v JavaScripte
Otvorená Collapsible v jQuery - Hotová riešenie v JavaScripte

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>

Ď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ím nasledujúceho súboru súhlasíš s licenčnými podmienkami

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

 

Všetky články v sekcii
Hotová riešenie v JavaScripte
Článok pre vás napísal Patrik Smělý
Avatar
Užívateľské hodnotenie:
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.
Aktivity