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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Introduction to ZendX jQuery

Similar to Introduction to ZendX jQuery (20)

Recently uploaded

Recently uploaded (20)

Introduction to ZendX jQuery

Editor's Notes