Introduction to ZendX jQuery

Dennis De Cock PHPBenelux meeting, 2010, Leuven

About me ,[object Object],[object Object]

About this presentation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Facts ,[object Object],[object Object],[object Object],[object Object]

Requirements ,[object Object],[object Object]

How to integrate ,[object Object],[object Object],[object Object],[object Object]

ZendX_jQuery View Helper ,[object Object],[object Object],[object Object],[object Object]

Add jQuery to the View Helper ,[object Object],[object Object],[object Object],$view->addHelperPath(“ZendX/jQuery/View/Helper”, “ ZendX_Jquery_View_Helper”); ZendX_jQuery::enableView($view);

Method 1: add jQuery to the view helper path ,[object Object],[object Object],$view = new Zend_View(); $view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper'); echo $this->jQuery;

Method 2: ZendX_jQuery::enableview ,[object Object],[object Object],$view = new Zend_View(); ZendX_JQuery::enableView($view); echo $this->jQuery;

Output to browser ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Local or CDN? ,[object Object],[object Object],$view->jQuery()->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js') ->setUiLocalPath(‘/js/jquery/js/jquery-ui-1.7.2.custom.min.js');

Output to browser using local library

Enable or disable jQuery ,[object Object],[object Object],if($this->jQuery()->isEnabled()){ $this->jQuery()->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js') ->setUiLocalPath('/js/jquery/js/jquery-ui-1.7.2.custom.min.js') ->addStyleSheet('/js/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css'); echo $this->jQuery(); } $this->jQuery()->enable();

ZendX_jQuery UI themes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ZendX_jQuery UI themes ,[object Object],view->jQuery()->addStyleSheet($path)

ZendX_jQuery AjaxLink Helper ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ZendX_jQuery AjaxLink Helper example ,[object Object],[object Object],<?php echo $this->ajaxLink("Test link", '/test', array( 'update' => '#container', 'beforeSend' => 'fadeout', 'complete' => 'fadein')); ?> <?php echo $this->ajaxLink("Test link", $this->url(array('controller'=> 'test', 'action'=>'index'), 'default', true), array( 'update' => '#container', 'beforeSend' => 'fadeout', 'complete' => 'fadein')); ?>

ZendX_jQuery AjaxLink Output to browser

Extending with plugins (example dataTables) ,[object Object]

Extending with plugins (example dataTables) ,[object Object],[object Object],$this->jQuery()->addJavascriptFile('/path/to/js/jquery.dataTables.js') $(document).ready(function() { $('#mydatagrid').dataTable( { "bJQueryUI": true, "sPaginationType": "full_numbers" } ); } );

Extending with plugins (example dataTables) Your datagrid is converted into a dataTable with jQuery UI !

ZendX_jQuery Form Helpers ,[object Object],[object Object],[object Object]

ZendX_jQuery Form layout script example

ZendX_jQuery Form class example

ZendX_jQuery Layout Helpers ,[object Object],[object Object],[object Object],[object Object]

ZendX_jQuery Layout Helpers ,[object Object]

ZendX_jQuery Layout Helpers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ZendX_jQuery Layout Helpers Example Tabcontainer in layout script:

ZendX_jQuery Layout Helpers Example Tabcontainer code output to browser:

ZendX_jQuery Layout Helpers Example Tabcontainer result:

Advanced topics ,[object Object],[object Object],[object Object],[object Object]

Summary ,[object Object],[object Object],[object Object]

Recommended reading jQuery UI 1.7: The User Interface Library for jQuery By: Dan Wellman Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques By: Jonathan Chaffer, Karl Swedberg http://devzone.zend.com/article/11760 Managing CSS and JavaScript files within a Zend Framework Application By: andybaird

Introduction to ZendX jQuery

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Introduction to ZendX jQuery

Similar a Introduction to ZendX jQuery (20)

Último

Último (20)

Introduction to ZendX jQuery

Notas del editor