Axure RP tip: Jak na lightbox
Drobný tip pro všechny (spíš začátečníky), kteří pracují s Axure RP.
Můj postup na vytváření lightboxů
Axure používám pro navrhování wireframes a tvorbu interaktivních prototypů webu. Celkem často potřebuji udělat nějaký ten lightbox.
Axure sice umí pracovat s vrstvami pomocí dynamických panelů (Dynamic Panel) přímo v rámci každé stránky, nicméně tohle řešení se při větších projektech stává poněkud těžkopádným. Také z důvodu větší přehlednosti je lepší mít všechny stránky včetně lightboxů pohromadě v sidebaru Sitemap.
Proč lightbox jako samostatná stránka?
Výhodou lightboxu jako samostatné stránky je zejména větší přehled o všech unikátních stránkách (hodí se například pro grafika - nezapomene to nakreslit).
Druhou výhodou je taky to, že na lightbox můžete odkazovat z více než jen jedné (rodičovské) stránky.
V neposlední řadě je tvorba samostatných stránek řádově rychlejší než používání standardní metody s Dynamic Panel widgetem.
Pozadí lightboxu jako Master
Předpokládejme, že všechny lightboxy na stránce by měly vypadat vizuálně podobně (konzistence). Tím mám na mysli barvu pozadí, pozici zavíracího tlačítka apod.
Z toho důvodu je jednodušší připravit si část lightboxu jako Master šablonu. Výhodou je pochopitelně možnost opakovaného používání a jednoduchých úprav napříč všemi stránkami, na kterých se lightbox bude používat. Pokud chcete, můžete si do Master šablony pochopitelně připravit mimo zavíracího tlačítka lightoxu i některé další prvky.
Zavírání lightboxu
Reálný lightbox v HTML a Javascriptu funguje jako layer, který se zobrazí bez znovunačtení stránky. Zavření lightboxu tedy pouze tento layer skrývá.
Axure umožňuje toto chování nasimulovat pomocí OnClick událostí Back in Current Window. Pokud přiřadíme tuto událost jak na celou (tmavou) plochu lightboxu, tak na zavírací tlačítko, budeme po kliknutí vždy přesměrování na předcházející stránku. Správné přesměrování proběhne i v případech, že lightbox otevíráme z několika různých stránek.
Náhled a soubor ke stažení
Výsledek výše zmiňovaného postupu si můžete prohlédnout v HTML exportu z Axure RP, případně přímo stáhnout jako .rp soubor.
Hotovo. Bylo to užitečný? Mám psát další tipy? Nebo jsem mimo mísu a tohle všichni znáte? Omluva: je to starší text, co jsem vyhrabal z virtuálního šuplíku.
