logo标签列表

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

jqueryzend-frameworkjquery-ui
21

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

6个回答
33

我通过以下步骤使jQuery在我的1.9.4项目中工作：

第一步：将ZendX目录复制到您的library目录中。在Zend Framework下载的extras/library目录中可以找到ZendX。

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

第三步：解压下载文件并将jquery-ui-1.7.2重命名为jquery，然后移动到您的public/js目录。

第四步：在您的bootstrap文件中添加这些行：

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');
}

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

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

第六步：为了测试您已经准备就绪，将此行添加到其中一个视图脚本中：

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

现在，如果你在浏览器中打开这个页面，应该会看到一个文本框。你可以点击文本框，这会自动弹出一个已经被修改为UI Lightness主题的日历。

10
一个小问题需要注意：
必须将ZendX文件夹添加到您的库目录中 - 与您的Zend目录相同的那个库目录。 
[your/lib/path]
|
+-Zend
|  |
|  +-(完整的东西)
|
+-ZendX
|  |
|  +-JQuery，Db，Console，...
如果未将ZendX添加到您的库目录中，则会出现许多此类错误消息： 
致命错误：未捕获的异常'Zend_Loader_PluginLoader_Exception'
消息为“未在注册表中找到名称为'JQuery'的插件；
使用的路径：ZendX_JQuery_View_Helper_：ZendX/JQuery/View/Helper/
Zend_View_Helper_：Zend/View/Helper/：....。
另一个小问题：
在Andrew上面提供的代码中，请注意突出显示的重要单词： 
现在将jQuery视图助手添加到您的布局文件中：
<head>
    <？php echo $this->jQuery();？>
</head>

为了测试是否所有内容都正常工作，请将以下行添加到视图脚本之一中：
<code>
选择日期：<？php echo $this->datePicker（“dp1”，.....
</code>
虽然 $this->jQuery() 必须放在布局文件中，以便所有页面都具有jquery功能，但实际的jQuery代码必须放在视图文件本身中 - application/views/scripts/yourcontroller/youraction.pthml - 仅使用这个简单的代码在布局中不起作用。
8
解决方案是 - >
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;
}

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

这样做对我有用。

6

我想补充一点，你需要在_initViewHelpers函数中启用jquery和jquery组件：

$view->jQuery()->enable()
            ->uiEnable();
3
在Bootstrap中启用jQuery，将会在每个页面中包含jQuery JavaScript（无论是否需要）。通过使用jQuery表单元素（例如），它会自动启用jQuery，并包含必要的JavaScript。只有在需要时再包含可能更有效，但这取决于您。您可以决定在每个页面上包含jQuery。 - Andrew
3
user117640所说的，我必须启用jQuery和UI，可以在以下位置完成：

bootstrap：

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

控制器::一些操作：


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

查看 someAction.phtml 文件：

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

将此内容包含在您的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');

将此添加到您的布局中。
<head>
    <?php echo $this->jQuery(); ?>
</head>

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

<?php echo $this->datePicker("dp1", '', array('defaultDate' => date('Y/m/d', time()))); ?>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接