Diskusia – Dokončujeme zaujímavé interaktívne menu v JavaScripte

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

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ě!

Odpovedať

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.

Odpovedať

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

Editované 13.10.2014 17:26

Odpovedať

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

Odpovedať

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

Odpovedať

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.

Odpovedať

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();
        }
}

Odpovedať

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?

Odpovedať

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.

Odpovedať

18.4.2019 0:02

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!

Najčastejšie vyhľadávané

Diskusia – Dokončujeme zaujímavé interaktívne menu v JavaScripte