在主题中使用内置的jQuery UI

25

我主题的每个页面都需要使用jquery UI。我知道它已经包含在Drupal 7中，但是我无法真正解读Drupal的技术文档。看起来唯一的方法是使用template.php文件。但是由于我不了解该文件，因此我试图避免这样做。

还有另一种方法，还是应该只尝试template.php文件？

7 theming javascript

— 本
source

你想做什么？所有的jQuery UI功能以及不可用的功能。在每个页面上执行自定义JS代码？在特定页面上执行？一个特定的事件？有很多方法可以使JS执行，即drupal_add_js

— LSU_JBob 2011年

我试图在出现在主题的每个页面中的某些字段上使用.datepicker（）。也许以后还会有更多的东西。

— 本

@Ben如果答案解决了您的问题，请记住要奖励赏金。

— googletorp

@googletorp对不起，我的第一个赏金。获得赏金。

— 2012年

我觉得许多答案都遗漏了最后一步，一旦您包含drupal_add_library（'system'，'ui.button'）或其他内容，您需要在主题中添加一行或两行javascript，实际调用插入。

— 莱恩·普赖斯

36

即使您需要使用php，将JS添加到页面上也并不难。

对于普通的JS文件，您可以执行以下操作

drupal_add_js($path_to_js)

但是，Drupal已将jQuery UI注册到库中，这使得为某些jQuery UI插件添加JS和CSS文件更加容易。这可以使用

drupal_add_library($module, $library);

所有jQuery UI插件都存在于系统模块中，因此您可以

drupal_add_library('system', 'ui');

要么

drupal_add_library('system', 'ui.accordion');

其中一些插件具有依赖性，因为它们使用其他插件。Drupal非常巧妙地处理了这一问题，并将包括所需的组件。

您可以在此处查看jQuery插件的完整列表。它的格式为PHP数组，但通常的命名约定为ui.PLUGIN-NAME。

如果您需要在每个页面上添加JS，则只需添加一个预处理页面挂钩并将其添加到该页面即可。在template.php文件中看起来像这样。

function NAME_OF_THEME_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.accordion');
  drupal_add_library('system', 'effects.highlight');
}

— googletorp
source

我尝试将您在此处的内容完全添加（但是使用主题名称代替NAME_OF_THEME）添加到template.php中，但它不起作用。有任何想法吗？这就是我所拥有的：

function nocturnal_preprocess_page(&$variables) { 	drupal_add_library('system', 'ui'); 	drupal_add_library('system', 'ui.datepicker'); }

— 2012年

@ben每次添加新的钩子或预处理函数时，都需要清除缓存。尝试清除缓存。您还需要一种测试其是否有效的方法，因为您仅添加了自己无法执行任何操作的JS文件。

— googletorp

我确实清除了缓存，并且它应该在以前使用手动引用的jquery UI的某些日期字段上工作。仍在调试中，但到目前为止找不到任何错误。

— 2012年

@Ben第一步是查看源代码，查看文件是否已包含（如果启用了，则禁用JS聚合）

— googletorp

3

@googletorp：你能解释的区别betweeen位drupal_add_library('system', 'ui');和drupal_add_library('system', 'ui.accordion');？是第一个获取所有内容还是仅获取核心内容？我使用的每个插件都需要一行吗？

— Jarl 2013年

4

您是否尝试过date_popup模块？与表单API一起使用时效果很好

— LSU_JBob
source

我不需要模块，因为需要它的表单非常复杂并且需要自定义编码。它被硬编码到主题模板中。我试图找出使用Drupal附带的jquery UI的最佳方法。使它起作用的唯一方法是将其放在主题的文件夹中并链接到该文件夹。但是由于我在一个Drupal安装上运行多个站点，并且所有这些站点都需要jQuery UI，所以我只想使用内置的jQuery UI来防止重复工作。

— 本

您应该能够从任何站点调用任何jQuery ui东西并将其添加到drupal核心中。表单是使用Form API构建的吗？

— LSU_JBob 2011年

2

为什么将表单内置到模板文件中？那不是很灵巧……如果您不使用表单API，则会错过一些好处，例如来自SQL注入攻击的内置安全性。我强烈建议您将表单从模板文件中取出，并编写一个自定义模块，以便您使用Form API来制作表单。尽量不要当牛仔。无论如何，您都可以使用drupal_add_js在任何地方引用javascript，例如drupal_add_js（'/ misc / ui / jquery.ui.core.min.js'，'file'）; AND drupal_add_js（'/ misc / ui / jquery.ui.datepicker.js'，'file'）;

— LSU_JBob 2011年

3

使用Form API在自定义模块中创建表单，然后在tpl文件中调用render（drupal_get_form（'form_id'））; 我保证表格api（也许带有一些自定义javascript）可以处理您遇到的任何复杂要求。我觉得您只是通过尝试将所有功能都塞入tpl文件中而使事情变得更加艰难。从技术上讲，这是主题层，因此在其中放入功能性后端代码的大块并不是最佳实践。

— LSU_JBob 2011年

3

我认为他说的是创建模块。功能性的东西（如形式）属于模块。Form API使您可以创建自己可以在自己的自定义模块中想象的任何形式的表单。在大多数情况下，主题应独立于功能。这将为您提供更大的灵活性。

— 乔纳森·罗尼

4

将.tpl文件中的硬编码表单重构为Form API实现。就像@LSU_JBob所说的那样，没有理由不使用FAPI而创建表单。我建议您阅读Form API快速入门指南，并在Form API参考页上添加书签。
构建好表单后，便可以向其提交值，进行处理等，然后下载并阅读Date contrib模块中的代码。日期用于提供您要创建的日期弹出窗口的类型，但D6中的CCK和D7中的核心字段适用。尽管您不想使用字段，但Date模块使用JQuery UI来完成您要尝试的操作。这个模块应该给你一个可靠的例子。

— 业余咖啡师
source

谢谢。这些链接很有帮助。我真的不喜欢使用PHP，但是我想要做的正是在这种情况下想要做的事情。为了节省时间，我可能只将其保存在tpl文件中，因为我现在没有时间学习Drupal PHP。大家的好建议。

— 2012年

3

感谢您googletorp的回答。

补充一下，如果还不清楚是否与启用UI插件有关。

请注意，当您提及时：drupal_add_library('system', 'ui');
这不会自动启用所有ui插件。

您可以在以下位置找到drupal 7中可用的jquery ui插件的列表： /misc/ui/

要启用垂直插件，例如：jquery.ui.slider.min.js，您需要添加以下行：

drupal_add_library('system', 'ui.slider');

希望这是有用的。

— 苏莫阿南德
source

2

我最近有这个问题。有人给了我他们的自定义模块，以强制在每个页面上加载JQuery UI。您可以简单地重新创建它。首先，安装jquery_update并确保其正常工作。然后，创建并启用此模块：

在名为“ jquery_force”的路径/至/模块中创建一个文件夹。

在里面，添加两个文件：

jquery_force.info：

name = JQuery UI Force
description = Forces JQuery UI to always load
dependencies[] = jquery_update
package = User Interface
core = 7.x
files[] = jquery_force.module

jquery_force.module：

<?php
/**
 * @file jquery_force.module
 * TODO: Enter file description here.
 */

/**
 * Implements hook_init().
 */
function jquery_force_init() {
    drupal_add_library('system', 'ui');
}

— 地铁
source

2

在template.php文件中添加预处理钩对我不起作用。

我只是将drupal_add_library('system', 'ui');其template.php本身放入文件中即可工作。

— 用户17418
source