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

Neaktivní uživatel

Člen

Neaktivní uživatel:23.3.2014 18:00

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

Odpovědět

23.3.2014 18:00

Neaktivní uživatelský účet

Michal Žůrek - misaz

Tvůrce

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.

Odpovědět

23.3.2014 18:16

alex

Člen

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

Odpovědět

13.10.2014 17:23

Michal Žůrek - misaz

Tvůrce

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].

Odpovědět

13.10.2014 17:40

alex

Člen

alex:13.10.2014 18:07

takze je to v podstate to iste ako

this.children[i].style.left

Odpovědět

13.10.2014 18:07

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:13.10.2014 18:08

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

Odpovědět

13.10.2014 18:08

týpek

Člen

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 displayOrHideChildrens()

// zastavime bublani po kliku na podpolozky
for (var q = 0; q < this.children.length; q++) {
        this.children[q].element.onclick = function(e) {
                e.stopPropagation();
        }
}

Odpovědět

20.8.2015 22:51

Patrik Pastor

Člen

Patrik Pastor:17.4.2019 20:47

chapu, proc je to menu. Ale stale jsi nevysvetlil k cemu je tam ten element. menu.element.style.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?

Odpovědět

17.4.2019 20:47

Michal Žůrek - misaz

Tvůrce

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.

Odpovědět

18.4.2019 0:02

Naučíme tě pracovat na home-office.

Zjistit více...

Naučíme tě pracovat na home-office.

Více info »

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.

Nejčastěji vyhledáváné

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