Modální okno v Joomle

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.

Nejnovější články

  • Teorie velikosti ňader

    2014-01-07

    Pravda, blog post o ňadrech se na tento web tématicky úplně nehodí, ale jelikož mám v hlavě myšlenku, která se mi zdá být (nebudu chodit kolem horké kaše) geniální a má drahá polovička se snaží...

  • První Český Joomla Day

    2013-12-26

    V sobotu1. března 2014 se v Praze uskuteční první Český Joomla Day. Pěkně shrnul dosavadní informace Svatopluk Vít z JoomlaPortal.cz, takže já vypíchnu jen několik bodů. Potvrzeným hostem je...

  • Jak snadno prodávat Joomla rozšíření

    2013-12-03

    Proč nemá Joomla App Store podobný jako mají Google či Apple? Vývojářům by to usnadnilo život. Nemuseli by trávit čas nad budováním svých repozitářů, platebních systémů, update serverů, aktualizací...

  • Jednoduchý eshop pro Joomlu s RSForm

    2013-04-23

    Nedávno jsem nasazoval jednoduché e-commerce řešení a byl jsem postaven před hotovou věc, že k tomu bude použit RSForm. Byl jsem trochu skeptický použít RSForm na platby, ale po nasazení musím...

  • Jaký webhosting vybrat pro Joomlu?

    2013-04-18

    Za nějakých 8 let, co se pohybuji kolem Joomly jsem prošel pěknou řádku poskytovatelů webhostingu. Ať už pro hostování mých webů, ale i klientů. Občas jsem opravdu překvapen za jaké služby je někdo...

Tip

Rich Snippets for VirtueMart

rich-snippets 207x207This awesome Joomla plugin adds structured data (also called Rich Snippets or meta information) about your VirtueMart products. It generates this automatically from the actual products. The best benefit is that Google can display some of these information right in the search results.

 

EasyCalc

easycalcEasyCalc is component for creating realtime calculators of any type. For example if you need to explain your customers how many time / money / gray hairs atc. they save by using your product / service, let them count it for their situation.