在Zend Framework 1.9应用程序中开始使用jQuery的最佳方法？

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?

我想在我的Zend Framework应用程序中开始使用jQuery，但不确定哪种是最好的入门方式。我知道我可以像任何其他javascript库一样包含jQuery库，但是使用ZendX_JQuery有什么好处，在Zend Framework 1.9应用程序中开始使用它需要哪些步骤？

6 个解决方案

#1

I was able to get jQuery working in my 1.9.4 project by following these steps:

通过以下步骤，我能够让jQuery在我的1.9.4项目中工作：

Step 1: Copy the ZendX directory to your library directory. ZendX can be found in the extras/library directory of your Zend Framework download.

步骤1：将ZendX目录复制到库目录。 ZendX可以在Zend Framework下载的extras / library目录中找到。

Step 2: Download jQuery and the jQuery UI library from jqueryui.com. I chose the UI Lightness theme.

第2步：从jqueryui.com下载jQuery和jQuery UI库。我选择了UI Lightness主题。

Step 3: Extract the download and rename jquery-ui-1.7.2 to jquery and move to your public/js directory.

步骤3：解压缩下载并将jquery-ui-1.7.2重命名为jquery并移至public / js目录。

Step 4: Add these lines to your bootstrap file:

第4步：将这些行添加到引导程序文件中：

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:

第5步：现在将jQuery视图助手添加到布局文件中：

<head>
    <?php echo $this->jQuery(); ?>
</head>

Step 6: To test that you have everything working, add this line to one of your view scripts:

第6步：要测试一切是否正常，请将此行添加到您的一个视图脚本中：

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.

现在，如果您在浏览器中打开此页面，则应该有一个文本字段。您应该能够单击文本字段，该字段会自动弹出已设置为UI Lightness主题样式的日历。

#2

One little gotcha:
You have to add the ZendX folder to your library directory - the one which also has your Zend directory.

一个小问题：你必须将ZendX文件夹添加到你的库目录 - 也就是你的Zend目录。

[your/lib/path]
|
+-Zend
|  |
|  +-(the full thing)
|
+-ZendX
|  |
|  +-JQuery, Db, Console, ...

If you miss adding ZendX to your library directory, you get lots of errors messages like this:

如果您错过将ZendX添加到库目录中，则会收到大量错误消息，如下所示：

Fatal error:  Uncaught exception 'Zend_Loader_PluginLoader_Exception'  
with message 'Plugin by name 'JQuery' was not found in the registry; 
used paths: ZendX_JQuery_View_Helper_: ZendX/JQuery/View/Helper/
Zend_View_Helper_: Zend/View/Helper/: .....

Another little gotcha:
In the code presented by Andrew above, note the important words highlighted:

另一个小问题：在上面安德鲁提供的代码中，请注意突出显示的重要单词：

Now add the jQuery view helper to your layout file:
<head>
    <? php echo $this->jQuery(); ?>
</head>

To test that you have everything working, add this line to one of your view scripts:  
<code>
Pick your Date: <?php echo $this->datePicker("dp1", ..... 
</code>

While $this->jQuery() must go in the layout file so that all pages get jquery functionality, the actual jQuery code must go to the view file itself - application/views/scripts/yourcontroller/youraction.pthml - it does not work in the layout with just this simple code.

虽然$ this-> jQuery（）必须放在布局文件中，以便所有页面都能获得jquery功能，但实际的jQuery代码必须转到视图文件本身 - application / views / scripts / yourcontroller / youraction.pthml - 它不起作用在布局中只有这个简单的代码。

#3

The Solution is - >

解决方案是 - >

protected function _initView()
{
    $view = new Zend_View();
    $view->doctype('XHTML1_STRICT');
    $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
    $view->headTitle()->setSeparator(' - ');
    $view->headTitle('IMR - BI System');
    $view->env = APPLICATION_ENV;
    $view->baseUrl = Zend_Registry::get('config')->root_path;

    $view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
    $view->jQuery()->addStylesheet($view->baseUrl . '/js/jquery/css/south-street/jquery-ui-1.8.2.custom.css');
    $view->jQuery()->setLocalPath($view->baseUrl . '/js/jquery/js/jquery-1.4.2.min.js');
    $view->jQuery()->setUiLocalPath($view->baseUrl .'/js/jquery/js/jquery-ui-1.8.2.custom.min.js');
    $view->jQuery()->enable();
    $view->jQuery()->uiEnable();
    $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
    $viewRenderer->setView($view);
    Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

    return $view;
}

I just shifted my Code from _initViewHelpers to _initView

我刚刚将我的代码从_initViewHelpers转移到_initView

and it works for me.

它对我有用。

#4

Just wanted to add that you have to (or at least I had to) enable the jquery and jquery components in the _initViewHelpers function:

只是想补充一下你必须（或者至少我必须）在_initViewHelpers函数中启用jquery和jquery组件：

$view->jQuery()->enable()
            ->uiEnable();

#5

As user117640 sad,

由于用户117640伤心，

I had to enable the jQuery and UI, it can be done in:

我必须启用jQuery和UI，它可以在以下位置完成：

bootstrap :

bootstrap：

//it will enable for all views
$view->jQuery()->enable()->uiEnable();

controller::someAction :

controller :: someAction：

//JQ enabled for particular view)
$this->view->jQuery()->enable()->uiEnable();

view someAction.phtml:

查看someAction.phtml：

//JQ enabled for particular view
<?php $this-jQuery()->enable()->uiEnable(); ?>

#6

include this to ur bootstrap file

将此包含在你的bootstrap文件中

$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
$view->jQuery()->addStylesheet('/Your Public Path/js/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css')
               ->setLocalPath('/Your Public Path/js/jquery/js/jquery-1.3.2.min.js')
               ->setUiLocalPath('/Your Public Path/js/jquery/js/jquery-ui-1.7.2.custom.min.js');

Add this to ur layout

将此添加到您的布局

<head>
    <?php echo $this->jQuery(); ?>
</head>

and use jQuery UI functions in ur view file: Pick your Date:

并在你的视图文件中使用jQuery UI函数：选择你的日期：

<?php echo $this->datePicker("dp1", '', array('defaultDate' => date('Y/m/d', time()))); ?>

#1