将 jQuery、jQuery UI 和 jQuery 主题与 Zend 框架集成答案

【问题标题】：Integrating jQuery, jQuery UI, and jQuery Themes with the Zend Framework将 jQuery、jQuery UI 和 jQuery 主题与 Zend 框架集成
【发布时间】：2010-10-19 07:14:15
【问题描述】：

更新：这个问题指的是旧版本的 Zend Framework。了解如何将 jQuery 与 Zend Framework 1.9.4 (1.8+) 应用程序集成refer to this question。

我想我理解了基本概念，但我一定是在某个地方出错了。我正在尝试将 jQuery、jQuery UI 和 jQuery 主题集成到我的 Zend Framework 应用程序中。

在我的引导程序中，我正在注册 jQuery 视图助手：

$view->addHelperPath(self::$root . '/library/ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');

在我的表单中，我有一个日期选择器元素：

$date = new ZendX_JQuery_Form_Element_DatePicker('date');

在我的布局中，我调用了 jQuery 视图助手：

<head>
    <?= $this->jQuery() ?>
</head>

完成此操作后，我就可以实际使用日期选择器了。唯一的问题是日历完全搞砸了。它根本无法正确显示。

据我了解，javascript 文件是自动包含的（并由 Google 托管）。因此，为了使用不同的主题（来自ThemeRoller），您必须在自己的服务器上托管 js 和 css 文件。为了让我的日期选择器显示不同的主题，我应该经历什么过程？

更新：我这样做了。但我不确定这是否是最有效的方法。

<head>
<? //I couldn't get this way to work
   //$this->jQuery()->addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css');
   //But this way works
   $this->jQuery()->addStylesheet('/js/jquery/themes/ui-lightness/jquery-ui-1.7.1.custom.css')
              ->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js')
              ->setUiLocalPath('/js/jquery/js/jquery-ui-1.7.1.custom.min.js') ?>
    <?= $this->jQuery() ?>
</head>

【问题讨论】：

标签： jquery zend-framework user-interface datepicker themes

【解决方案1】：

使用ZendX_JQuery_View_Helper_JQuery视图助手（当然你也可以用Zend_View_Helper_HeadStyle视图助手注册样式表，但是使用jQuery视图助手将确保样式表只在启用jQuery时才包含）你可以注册一个从 Google CDN 提供的样式表：

$view->jQuery()->addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css');

smoothness 是根据jQuery UI ThemeRoller 图库的主题名称。更多主题网址请参见jQuery UI 1.7.1 release announcment blog post。

顺便说一句，我建议使用 ZendX_JQuery::enableView($view) 启用 jQuery 视图。我个人认为这是更明显的方法。

【讨论】：

ZendX_JQuery::enableView() 做什么？这与将视图助手路径添加到视图有什么不同吗？
目前：没有。它检查路径是否已经注册，如果没有则注册路径。但是要输入的代码更少，每个查看代码的人都可以想象这行代码在做什么。这实际上只是一个偏好问题。
嗯 - 似乎在这个 url 资源“ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes”上禁用了目录列表有没有办法找出所有可用主题的列表？
参见此处：blog.jqueryui.com/2009/03/jquery-ui-171 Google Ajax Libraries API > 主题（可用主题是 ThemeRoller 库中的标准主题：jqueryui.com/themeroller）
如何通过zend API设置媒体属性？我需要能够定义一个 print.css 并确保在最终呈现的 html 中设置了 media="print" 属性。例如

【解决方案2】：

我认为您需要下载 jquery ui css 文件。从 zip 中提取 css 文件并在您的 zend 应用程序中本地提供它们。我将文件添加到 '[Your_zend_project_root]\public\js\'。在您的 layout.phtml 文件中，使用“addStylesheet()”方法将路径添加到本地 css 文件。您需要更改所选主题名称的具体路径。

<?php echo $this->jQuery()
    ->setUiVersion('1.7.2')
    ->addStylesheet('/js/jquery-ui-1.7.2/development-bundle/themes/ui-lightness/jquery-ui-1.7.2.custom.css');?>

【讨论】：

【解决方案3】：

如果您使用的是 Google CDN，您只需将 .css 文件托管在您自己的服务器上。我不知道 ZendX_Jquery 是否使用它。这应该就是让它工作的全部。

【讨论】：