Con CakePHP 1.3 è possibile sfruttare altri framework Javascript oltre all’accoppiata Prototype/Scriptaculous utilizzando il JsHelper.
Per utilizzare JQuery è sufficiente seguire le istruzioni del manuale on line http://book.cakephp.org/view/1592/Js che riassumo di seguito.
- Scaricare JQuery http://docs.jquery.com/Downloading_jQuery
- Copiare gli script in app/webroot/js
- Includere la libreria in tutte le pagine. Per fare questo si può modificare il file /app/views/layout/default.ctp inserendo il codice
echo $this->Html->script('jquery-1.4.2.min');nella sezione <head></head>.
- Includere il seguente comando
echo $js->writeBuffer();
prima del tag </body>
- Richiamare il JsHelper inserendo il seguente codice nel controller
var $helpers = array('Js' => array('Jquery'));
A questo punto siamo pronti per utilizzare gli effetti di JQuery nelle nostre views
Nella view inseriamo il seguente codice che permette di mostrare o nascondere un DIV con effetto slide.
Creiamo i link e il box
<a href="#" id="apri">Apri il box</a> | <a href="#" id="chiudi">Chiudi il box</a> <div id="box" style=" border: 1px solid green; height:200px; width:100px; display:none"></div>
e poi aggiungiamo il codice PHP
$apri = $js->get("#box")->effect('slideIn');
$chiudi = $js->get("#box")->effect('slideOut');
$js->get("#apri")->event('click', $apri );
$js->get("#chiudi")->event('click', $chiudi );
Volendo includere un effetto non disponibile con JsHelper è possibile inserire del codice nativo JQuery e riutilizzarlo nel seguente modo
$codice = '$("#box").toggle("blind",{},500);';
$js->get("#toggle")->event('click', $codice );
6 comments for “Effetti JQuery in CakePHP 1.3”