Jednoduchá collapsible v JavaScriptu s knihovnou jQuery

JavaScript Hotová řešení Jednoduchá collapsible v JavaScriptu s knihovnou jQuery

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
Otevřená collapsible v jQuery

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="collap­sible('nase_co­llapsible')". 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.sli­deDown().

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(co­llapsible_fa, 360, 180). Také naší collapsible přidáme třídu aktivni-collapsible, collapsible.ad­dClass('aktiv­ni-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.sli­deUp(), AnimaceOtoceni(co­llapsible_fa, 360, 180), collapsible.re­moveClass('ak­tivni-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í.


 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal Patrik Smělý (SogoCZE)
Avatar
Autor se věnuje front-end i back-end vývoji webových stránek, nejvíce pracuje s jazykem PHP a Javascript. Rád se učí nové věci a někdy strčí nos i do 3D / 2D grafiky.

Jak se ti líbí článek?
Celkem (3 hlasů) :
4.666674.666674.666674.666674.66667


 


Miniatura
Předchozí článek
Menu item highlighting v jQuery
Miniatura
Všechny články v sekci
Hotová řešení v JavaScriptu
Miniatura
Následující článek
Hvězdičkové hodnocení v JavaScriptu

 

 

Komentáře

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

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">
Editováno 4.3.2015 13:45
Odpovědět  +4 4.3.2015 13:43
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Patrik Smělý (SogoCZE):

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 :).

Odpovědět  ±0 4.3.2015 13:54
PHP můj oblíbený jazyk......
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Patrik Smělý (SogoCZE):

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

Odpovědět  +1 4.3.2015 16:30
PHP můj oblíbený jazyk......
Avatar
loading84
Člen
Avatar
Odpovídá na Honza Bittner
loading84:

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.

 
Odpovědět 3.12.2015 18:43
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.