I want to get started working with jQuery in my Zend Framework application but not sure which is the best way to get started. I know I could include the jQuery library just like any other javascript library, but what are the advantages of using ZendX_JQuery, and what are the steps necessary to start using it in my Zend Framework 1.9 application?
Before you start studying jQuery, you should have a basic knowledge of: HTML. CSS. JavaScript.
It's good to know jQuery and there are still use cases for it. However, you should not spend a lot of time learning it. jQuery should not be your focus this year. The biggest advantage of jQuery now is that you can manipulate the DOM with less code.
jQuery css() Method The css() method sets or returns one or more style properties for the selected elements.
Though JavaScript is the basic language from which jQuery has evolved, jQuery makes event handling, DOM manipulation, Ajax calls much easier than JavaScript. jQuery also allows us to add animated effects on our web page which takes a lot of pain and lines of code with JavaScript.
I was able to get jQuery working in my 1.9.4 project by following these steps:
Step 1: Copy the ZendX directory to your library directory. ZendX can be found in the extras/library directory of your Zend Framework download.
Step 2: Download jQuery and the jQuery UI library from jqueryui.com. I chose the UI Lightness theme.
Step 3: Extract the download and rename jquery-ui-1.7.2 to jquery and move to your public/js directory.
Step 4: Add these lines to your bootstrap file:
protected function _initViewHelpers() { $view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper"); $view->jQuery()->addStylesheet('/js/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css') ->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js') ->setUiLocalPath('/js/jquery/js/jquery-ui-1.7.2.custom.min.js'); }
Step 5: Now add the jQuery view helper to your layout file:
<head> <?php echo $this->jQuery(); ?> </head>
Step 6: To test that you have everything working, add this line to one of your view scripts:
Pick your Date: <?php echo $this->datePicker("dp1", '', array('defaultDate' => date('Y/m/d', time()))); ?>
Now, if you open this page in your browser, there should be a text field. You should be able to click on the text field, which automatically pops up a calendar that has been styled to the UI Lightness theme.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With