NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze – Jednoduchá collapsible v JavaScriptu s knihovnou jQuery

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Honza Bittner
Tvůrce
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">
Editováno 4.3.2015 13:45
Odpovědět
+4
4.3.2015 13:43
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Patrik Smělý
Tvůrce
Avatar
Odpovídá 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 :).

 
Odpovědět
4.3.2015 13:54
Avatar
Patrik Smělý
Tvůrce
Avatar
Odpovídá 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í.

 
Odpovědět
+1
4.3.2015 16:30
Avatar
Vít Cigánek
Člen
Avatar
Odpovídá 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.

 
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.