SmartMenus Tutoriál

Eventy a metody

V této části si ukážeme co jsou to metody a eventy. Občas se to může hodit, ale většinou to asi nepoužijete.

Eventy

Eventy nám umožňují nastavit si funkce, které se spustí po proběhnutí nějaké akce. Můžeme si například nastavit funkci, která se zavolá když uživatel najede myší na položku menu nebo když na ni třeba klikne. Funkci, kterou smartmenus zavolá po proběhnutí nějaké akce nastavíme pomocí metody jménem on. Této metodě předáváme typ eventu pro který se bude funkce volat a funkci samotnou. K názvům eventů vždy přidáváme text ".smapi". Pokud tedy chceme, nastavit funkci pro event activate, napíšeme activate.smapi.

// nastavení funkce, která se zavolá po kliknutí na položku menu
$('#moje-menu').on('click.smapi', function(e, item) {
    console.log("položka menu byla kliknuta");
});

// nastavení funkce, která se zavolá po otevření sub menu
$('#moje-menu').on('show.smapi', function(e, menu) {
    console.log("sub menu bylo otevřeno");
});

Zde je přehled všech eventů, kterým můžeme naslouchat:

activate

Spouští se když je položka menu aktivována a předtím než se zobrazí její sub menu, pokud jej má. Pokud ve funkci vrátíme false, tak se sub menu nezobrazí.

Parametry funkce: JQuery.Event objekt, položka menu (a element)

beforefirstshow

Spouští se pro každé sub menu po jeho prvním zobrazení. Pokud ve funkci vrátíme false, tak se sub menu nezobrazí.

Parametry funkce: JQuery.Event objekt, sub menu (ul element)

beforehide

Spouští se před zavřením sub menu. Pokud ve funkci vrátíme false, tak se sub menu nezavře.

Parametry funkce: JQuery.Event objekt, sub menu (ul element)

beforeshow

Spouští se před otevřením sub menu. Pokud ve funkci vrátíme false, tak se sub menu neotevře.

Parametry funkce: JQuery.Event objekt, sub menu (ul element)

blur

Spouští se když položka menu ztratí focus.

Parametry funkce: JQuery.Event objekt, položka menu (a element)

click

Spouští se po kliknutí na položku menu. Pokud ve funkci vrátíme false, tak se odkaz položky neotevře a pokud položka obsahuje sub menu, také se neotevře. Tento event se spouští také pro vypnuté položky menu.

Parametry funkce: JQuery.Event objekt, položka menu (a element)

focus

Spouští se když položka menu získá focus.

Parametry funkce: JQuery.Event objekt, položka menu (a element)

hide

Spouští se po zavření sub menu.

Parametry funkce: JQuery.Event objekt, sub menu (ul element)

hideall

Spouští se po zavření všech sub menu (třeba při kliknutí mimo menu).

Parametry funkce: JQuery.Event objekt

mouseenter

Spouští se při najetí myši na položku menu.

Parametry funkce: JQuery.Event objekt, položka menu (a element)

mouseleave

Spouští se při odjetí myši pryč z položky menu.

Parametry funkce: JQuery.Event objekt, položka menu (a element)

select

Spouští se při vybrání položky menu, než se načte její odkaz. Pokud ve funkci vrátíme false, tak se položka nevybere, její odkaz se nenačte. Tento event není spouštěn pro vypnuté položky menu.

Parametry funkce: JQuery.Event objekt, položka menu (a element)

show

Spouští se po otevření sub menu.

Parametry funkce: JQuery.Event objekt, sub menu (ul element)

Metody

Metody nám umožňují ovládat menu pomocí kódu. Máme k dispozici metodu pro zavření všech sub menu, vypnutí menu a tak dále. Až na dvě globální metody se všechny metody volají přes metodu smartmenus, kterou používáme také k inicializaci menu. Předáváme jí jméno metody a popřípadě také nějaké argumenty.

Globální metody

Globální metody se týkají všech menu instancí, které na stránce máme. Pokud je závoláme, tak se provedou u všech menu.

// zavře všechna sub menu všech menu na stránce
$.SmartMenus.hideAll();

// odstraní všechna menu na stránce
$.SmartMenus.destroy();

Globální metody máme jen tyto dvě:

destroy

Odstraní všechna menu na stránce.

hideAll

Zavře všechna sub menu všech menu na stránce.

Metody instancí

Metody, které voláme přes metodu smartmenus se týkají jen menu, na kterém metody voláme.

// vypnutí menu
$('#moje-menu').smartmenus('disable', true);

// zapnutí menu po jeho vypnutím
$('#moje-menu').smartmenus('enable');

// zavření všech sub menu
$('#moje-menu').smartmenus('menuHideAll');

Zde je přehled všech metod, které nám smartmenus poskytuje:

destroy

Odstraní menu.

disable

Vypne menu a popřípadě jej překryje průhlednou barvou.

Parametry: hodnota (true/false) určující jestli se má vypnuté menu překrýt průhlednou barvou

enable

Pomocí této metody můžeme menu zapnout, pokud jsme jej vypnuli.

itemActivate

Aktivuje položku menu. Pokud položka obsahuje sub menu, tak se zobrazí.

Parametry: vybraná položka menu pomocí JQuery, která se má aktivovat (např.: $('a#moje-polozka'))

menuHideAll

Zavře všechna otevřená sub menu.

popupHide

Skryje popup menu. Menu je popup menu, když má nastavené nastavení isPopup na hodnotu true. Pokud má menu nastavení isPopup nastaveno na hodnotu false, jedná se o permanentní menu a nemůže být touto metodou skryto.

Parametry: hodnota (true/false) určující jestli se má menu skrýt hned nebo se má počkat než uběhne čas nastavený pomocí nastavení hideTimeout (pokud předáme true, tak se menu skryje hned)

popupShow

Zobrazí popup menu. Menu je popup menu, když má nastavení nastavení isPopup na hodnotu true. Pokud má menu nastavení isPopup nastaveno na hodnotu false, jedná se o permanentní menu a nemůže být touto metodou zobrazeno. Jako parametry této metodě předáváme, na jakém místě se má popup menu zobrazit.

Parametry: hodnota pro CSS vlastnost left (například '100px'), hodnota pro CSS vlastnost top (například '100px')

refresh

Pomocí této metody můžeme menu re-inicializovat, když v něm provedeme nějaké DOM operace (když například přidáme nebo odstraníme položky).

Části Tutoriálu