Jednoduchá collapsible v JavaScriptu s knihovnou jQuery

V minulé lekci online kurzu jQuery, Odstraňování obsahu v jQuery (DOM), jsme se zabývali odstraňováním obsahu.

Dnes si ukážeme jak udělat jednoduchou collapsible pomocí jQuery. Collapsible je část webové prezentace, kterou lze rozbalit a sbalit. Ta naše bude vypadat takto:

Zavřená collapsible v jQuery - jQuery - Dynamické doplňky webu snadno a rychle

Otevřená collapsible v jQuery - jQuery - Dynamické doplňky webu snadno a rychle

Jako prví věc si musíme vytvořit html (index.html) dokument a následně kostru html dokumentu. Do jeho hlavičky přidáme pár základních věcí jako jsou ikonky (font awesome), abychom si mohli přidat příhodnou šipku, dále JavaScript knihovnu jQuery a také náš css soubor, který brzy vytvoří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>

Nyní si vytvoříme základní css (style.css) v adresáři css. Už jej nemusíte importovat, to jsme již udělali dříve.

* {
    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;
}

Nyní se vrhneme do samotné html části. Do collapsible přidáme tag article a do něj nadpis "h2", který bude mít pár atributů a tyto třídy: nadpis-article, collapsible-article a tento event: onclick="collapsible('nase_collapsible')". Poté ho použijeme jako název a zároveň jako tlačítko k naší collapsible. Potom do h2 vložíme ikonu, která bude mít také pár atributů. Jedná se o tag "i" s třídami: collapsible-fa, fa, fa-chevron-down. Dále bude mít id: collapsible-ikona-nase_collapsible. Přidáme div, který bude nést náš obsah a který se bude skrývat a odkrývat. Bude mít jen 2 atributy a to třídu a id. Třídy: obsah-article collapsible, id: collapsible-nase_collapsible. Do tohoto divu vložíme nějaký testovací text a ještě nad text dáme div s třídou 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>

Dále si do css přidáme několik věcí, aby nám collapsible dobře fungovala a to tyto:

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

Nyní si vytvoříme JavaScript (collapsible.js) soubor v adresáři js. V něm si vytvoříme dvě základní funkce. První je funkce, která se zavolá po kliknutí na collapsible. Když jí zavoláme, vyplníme id collapsible, kterou právě voláme. U nás jsem zvolil id nase_collapsible. Funkce se bude jmenovat velmi jednoduše a to collapsible.

Do této funkce si zvolíme pár proměnných a to collapsible, která bude mít hodnotu $('#collapsible-' + id), collapsible_fa s hodnotou $('#collapsible-ikona-' + id). Dále si dáme jednoduchou podmínku, která bude kontrolovat jestli je naše collapsible aktivní nebo není. Pokud collapsible není aktivní, aplikuje se animace collapsible.slideDown().

Dále použijeme naši funkci, kterou vám popíši později. Tato funkce slouží na otočení naší ikony v nadpisu AnimaceOtoceni(collapsible_fa, 360, 180). Také naší collapsible přidáme třídu aktivni-collapsible, collapsible.addClass('aktivni-collapsible'), aby náš script věděl jestli je collapsible aktivní či ne. Teď se vrátíme k podmínce jestli je collapsible aktivní, tedy jestli bude aktivní. Aplikujeme tento postup: collapsible.slideUp(), AnimaceOtoceni(collapsible_fa, 360, 180), collapsible.removeClass('aktivni-collapsible'). Následovně bude vypadat 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');
    }
}

Nyní si uděláme slíbenou funkci na otáčení ikonky. Funkce se bude jmenovat AnimaceOtoceni() a při volání uvedeme id naší ikonky, z jakého úhlu se má ikona otočit, a do jakého úhlu se má otočit. Funkce bude vypadat 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 nyní přidáme náš js soubor nad tag.

</body>

Děkuji za vaší pozornost, to je pro dnešek všechno budu rád za komentáře. Všechny zdrojové kódy jsou dostupné ke stažení.

V příští lekci, Třídy v jQuery (DOM), si ukážeme jak v jQuery manipulovat se třídami elementů.

Galerie

Program byl vytvořen v roce 2015.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 141x (478.07 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

Program pro vás napsal Patrik Smělý

Uživatelské hodnocení:

4 hlasů

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