| {** | |
| * My Application layout template. | |
| * | |
| * @param string $basePath web base path | |
| * @param string $robots tell robots how to index the content of a page (optional) | |
| * @param array $flashes flash messages | |
| *} | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="description" content=""> | |
| <meta name="robots" content="{$robots}" n:ifset="$robots"> | |
| <title>{block title|striptags|upper}Nette Application Skeleton{/block}</title> | |
| <link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css"> | |
| <link rel="stylesheet" media="print" href="{$basePath}/css/print.css"> | |
| <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> | |
| <script src="{$basePath}/js/nette.ajax.js"></script> | |
| <script src="{$basePath}/js/main.js"></script> | |
| {block head}{/block} | |
| </head> | |
| <body> | |
| <script> document.body.className+=' js' </script> | |
| {snippet flash} | |
| <div n:foreach="$flashes as $flash" class="flash {$flash->type}">{$flash->message}</div> | |
| {/snippet} | |
| {include #content} | |
| {block scripts}{/block} | |
| </body> | |
| </html> |
Modální okna vyplňována dynamicky AJAXem téměř bez JS kodu - čili využívají signály a knihovnu nette.ajax.js.
##Instalace
composer create-project nette/sandbox modalniOkna(poslední parametr je jméno složky v které se projekt vytvoří) 2. Nahraďte příslušné soubory ze sandboxu těmi odsud.
##TODO
flashMessages)##Problémy
handle pojmenoval $id.| {** | |
| * My homepage:default layout template. | |
| * | |
| * @author: Ondřej Profant, 201 | |
| * | |
| * @param string $basePath web base path | |
| * @param string $robots tell robots how to index the content of a page (optional) | |
| * @param array $flashes flash messages | |
| * @param date $now rendering time | |
| * @param array $ids ids in repository | |
| *} | |
| {block content} | |
| <script> | |
| function myShow() | |
| { | |
| $('#myModal').modal('show'); // z dokumentace bootstrapu | |
| } | |
| </script> | |
| <div class=container> | |
| <h1>Ukázka modálních oken</h1> | |
| <p><strong>Čas vykreslení: {$now|date:'%H:%M:%S'}</strong></p> | |
| <p>Dynamicky (foreach) generovaná tlačítka, která otevírají stejné modální okno, které se překreslí při kliknutí (handle a snippet).</p> | |
| <p>Pozor, pokud je <code>public function handleViewItem($id) {}</code>, tak to nefunguje, neb název parametru musí být jiný než <code>$id</code> (nevím proč).</p> | |
| {foreach $ids as $id} | |
| <a n:href="zobraz! $id" class="ajax btn btn-large" onclick="myShow()">Klikni id: {$id}</a> | |
| {/foreach} | |
| {* modální okno *} | |
| <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" | |
| aria-hidden="true"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
| <h3 id="myModalLabel2">Jedeme!</h3> | |
| </div> | |
| <div class="modal-body"> | |
| {snippet zobraz} | |
| {** | |
| * @param string $var | |
| *} | |
| <p>Čas vykreslení snippetu: {$now|date:'%H:%M:%S'}</p> | |
| <p n:if="isset($var)">ID: {$var}</p> | |
| {/snippet} | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> | |
| <button class="btn btn-primary">Save changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| {/block} |
| <?php | |
| /** | |
| * @author: Ondřej Profant, 2013 | |
| * | |
| * Homepage presenter | |
| */ | |
| class HomepagePresenter extends BasePresenter | |
| { | |
| /** | |
| * @var array | |
| */ | |
| private $rep = array( | |
| 1 => "jedna", | |
| 2 => "dva", | |
| 3 => "tri", | |
| 4 => "čtyři" | |
| ); | |
| public function renderDefault() | |
| { | |
| $this->template->now = date(DATE_RFC1036); // aktuální čas pro ukázku AJAX | |
| $this->template->ids = array(1, 2, 3, 4); // idčka kterými budeme iterovat | |
| } | |
| /** | |
| * @param int $itemId | |
| */ | |
| public function handleZobraz( $itemId ) | |
| { | |
| $this->template->var = $this->rep[$itemId]; // nová proměná, např. vytažená z DB | |
| if( $this->isAjax() ) { | |
| $this->invalidateControl('zobraz'); // invalidace snippetu | |
| } else { | |
| /** TODO Jak vypsat modal bez AJAXu? */ | |
| } | |
| } | |
| } |
| /** | |
| * @author: Ondřej Profant, 2013 | |
| */ | |
| $(function(){ | |
| // spuštění knihovny: nette.ajax.js | |
| $.nette.init(); | |
| }); |