BLACK FRIDAY - Největší IT akce roku. Získej až 80 % kreditů navíc nebo využij slevy až 80 % na e-learning. Ale pozor, akce platí pouze do 30. 11. 2025.
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

Diskuze – Dokončujeme zajímavé interaktivní menu v JavaScriptu

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
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:23.3.2014 18:00

Spousta matiky, co :D Tak hlavně aby se v tom nováček nestratil. Palec nahoru, každopádně!

Odpovědět
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:23.3.2014 18:16

Jo je to matematika základní školy, ale máš recht. Moji spolužáci už jsou v tomto třeba úplně ztraceni.

Avatar
alex
Člen
Avatar
alex:13.10.2014 17:23 
RadialMenu.prototype.setPositions = function () {
        for (var i = 0; i < this.children.length; i++) {
                var menu = this.children[i]
                var degressBetweenSubItems = 360 / this.children.length

                var degress = (degressBetweenSubItems * i);

                var sin = Math.sin(Math.deg2rad(degress))
                var cos = Math.cos(Math.deg2rad(degress))
                var x = this.size / 2 + (cos * this.size / 2) - menu.size / 2;
                var y = this.size / 2 + (sin * this.size / 2) - menu.size / 2;


                menu.element.style.top = y + "px";
                menu.element.style.left = x + "px";
        }
}

preco je tam to

menu.element.style.top = y + "px";
      menu.element.style.left = x + "px";

Nestaci proste menu.style.top? aku funkciu tam plni to element?
nemalo by to byt skor

this.element.children[i].style //resp
 this.element.menu

?

Editováno 13.10.2014 17:26
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na alex
Michal Žůrek - misaz:13.10.2014 17:40

protože proměnná menu obsahuje jakoby to podmenu a this by mi vrátilo ten základ z kterého vycházím, ale to nechci - já chci jako by jeho potomky.

- menu // toto vrátí this
  - podmenu1 // toto procházím v cyklu
  - podmenu2 // toto taky
  - podmenu3 // toto taky

já tu proměnnou menu definuji abych nemusel pořád dokola opisovat this.children[i].

Avatar
alex
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
alex:13.10.2014 18:07

takze je to v podstate to iste ako

this.children[i].style.left
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na alex
Michal Žůrek - misaz:13.10.2014 18:08

jo tak vidíš snad co na 3 řádku té metody ukládám do menu.

Avatar
týpek
Člen
Avatar
týpek:20.8.2015 22:51

Čau, článek hodně dobrý, moc mi pomohl s objekty v JS. Sice moc nerozumím funkci setPositions() ale to pro mě není hlavní. Ještě přidám menší kód, kterým jsem si obohatil menu. Zastaví probublávání událostí po kliku na podpoložky a načítá/skrývá je postupně.

Postupně načítá/skrývá položky menu. Nesmíme zapomenout předat self jako argument funkce.

RadialMenu.prototype.displayOrHideChildrens = function(self) {
        // prodleva mezi obejevnim se polozek menu
        var time = 100;
        var status = '';

        // overujeme, zda je menu skryte ci nikoliv. Pote si do promenne status dosadime spravnou vlastnost
        (this.children[0].element.style.display == "none") ? (status = "block") : (status = "none");

        var i = 0;
        var childrenLength = this.children.length;

        var timer = setInterval(function() {
                var menu = self.children[i];
                if (i < childrenLength) {
                        menu.element.style.display = status;
                        i++;
                }
        }, 100)
}

Tady zastavuji probublávání. Vložíme třeba hned za událost onclick, kde voláme funkci displayOrHideChil­drens()

// zastavime bublani po kliku na podpolozky
for (var q = 0; q < this.children.length; q++) {
        this.children[q].element.onclick = function(e) {
                e.stopPropagation();
        }
}
Avatar
Patrik Pastor
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Patrik Pastor:17.4.2019 20:47

chapu, proc je to menu. Ale stale jsi nevysvetlil k cemu je tam ten element. menu.element.sty­le.top = y + "px"; proc neni pouze menu.style....

Tak jako ve funcki SetSize je nekde

else {
menu.size = this.size * 0.25
}

A taky neni menu.element.size = this.size * 0.25

PROC potom?

Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Patrik Pastor
Michal Žůrek - misaz:18.4.2019 0:02

nevim. Nevim proč jsem to tehdy tak psal. Bez element by to mělo fungovat taky. Ten článek je starý možná i 6 let, tak fakt nevím, proč jsem to tam tehdy psal. Normálně to nikde nepíšu.

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 9 zpráv z 9.