Jan Linhart

Modální okno v Joomle

Podrobnosti

Zveřejněno 26. 3. 2012 23:22

Joomla framework je úžasná sada tříd, kterou programátor může využít ve svých rozšířeních. Když se podíváme jen na třídu JHtml a její potomky. Ukážu jak snadné je použití hezkých JavaScriptových efektů. Osobně jako JS framework preferuji jQuery, ale použití následujících efektů pomocí vestavených MooTools je tak snadné, až se to nedá ignorovat :)

Modální okno

Modální okno jistě znáte z administrace. Téměř všechny komponenty ho využívají ke zobrazení konfigurace. Abyste mohli toto okno použít, nemusíte napsat ani řádku PHP kódu. Vlastně jednu jo. Musíte si zavolat JS pro modální okno, viz níže. Následně stačí odkazu přidat třídu modal (class="modal") a zavolaný JavaScript už otevře odkaz v modálním okně.

Vložení JS pro modální okna do souboru

Tam, kde se chystáte používat modal box, umístěte tento řádek PHP:

JHTML::_('behavior.modal');

Umístíte-li ho do souboru index.php vaší šablony, můžete modal box používat všude. 

Příklad 1 - článek v modálním okně

Možná se někomu bude hodit zobrazit článek v modálním okně. Představte si, že například chcete po uživateli potvrdit obchodní podmínky, ale nechcete je celé vypisovat a nechcete na ně ani odkazovat, aby se uživatel neztratil. Nejlepším řešením je zobrazit je v modal boxu.

Článek v modálním okně

Modální okno zavoláte takovýmto odkazem:

<a href="/cz/blog/78-modalni-okno-v-joomle.html?tmpl=component" class="modal" rel="{size: {x: 700, y: 500}, handler:'iframe'}">Článek v modálním okně</a>

Všimněte si dvou věcí.

1. URL odkazu končí tmpl=component. Tím Joomle říkáme, aby zobrazila jen komponentu. Nic okolo. žádné logo ani moduly ani patičku. Není to dokonalé? :)
2. JavaScript modálního okna se zavolá jen na odkazy s CSS třídou "modal". To, co definuji v atributu rel není nutné. Dají se tím nastavit rozměry, způsob zobrazení a další.

Příklad 2 - DIV v modálním okně

Také je možnost načíst v modal boxu jen část stránky. Následující odkaz zobrazí jen levý sloupec. Stačí odkázat na CSS ID daného DIVu.

DIV v modálním okně

<a href="#leftcolumn" class="modal">DIV v modálním okně</a>

Příklad 3 - obrázek v modálním okně

Modal box se dá použít i na zobrazování náhledů obrázků, takže vám nic nebrání k vytvoření vlastní galerie.

Otevřít obrázek

<a href="http://escope.cz/images/phocagallery/thumbs/phoca_thumb_l_yacht1.jpg" class="modal">Otevřít obrázek</a>

Zdroje

Pokud si chcete o možnostech modálního okna počíst víc, podívejte se na tento názorný článek [en] o použití modálního okna v administraci a tento článek o použití na front endu. Zde je odkaz přímo na autora SqueezBoxu, jak se Joomla modalbox javascript opravdu jmenuje.