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:
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_collapsible')". 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.slideDown ().
Ď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.addClass ( '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.removeClass ( '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é 145x (478.07 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
