如何将Jquery插件添加到Drupal？

我应该只将代码粘贴到主模板文件中，还是在Drupal 7中附加其他建议的附加新Jquery插件的方法？

最简单的方法是将其添加到主题的.info文件中：

scripts[] = js/my_jquery_plugin.js

唯一的例外是，如果要添加外部资源（CDN /托管脚本），则应使用drupal_add_js（），如Jamie Hollern所述。

Drupal附带了Jquery。

要添加js文件，您可以按照其他文章中介绍的方式使用drupal_add_js。

这将在简单的情况下起作用，但是如果您开始拥有依赖于其他插件的插件。您可能想看看库api。我希望及时创建模块来支持流行的库，请参见system_library（）中的一些用于JQuery ui的模块。

在此示例中，包含jQuery ui.accordion模块，可以使用drupal_add_library（）

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

这将确保js与CSS以及依赖它的所有库一起被包含。它还将确保库仅包含一次。

如果您说使用的是哪个库，我可以提供如何定义它的示例代码

因此，首先创建一个模块来定义库（称为qtip），然后将该模块上传到module文件夹下的js文件夹中

然后实现hook_library（）

function qtip_library() (
 $libraries['qTip'] = array(
    'title' => 'qTip', 
    'website' => 'http://craigsworks.com/projects/qtip/docs/', 
    'version' => '1.0.0-rc3', 
    'js' => array(
      drupal_get_path('module', 'qtip') . '/js/jquery.qtip-1.0.0.min.js' => array(),
    ),
    'dependencies' => array(
      array('system', 'jquery'),
    ),
  );
  return $libraries;
}

然后添加放入代码中的文件

drupal_add_library('qtip', 'qtip');

对于一个简单的库来说，这可能是过大的杀伤力，但是如果您必须在多个站点和主题上管理大量的库，那确实会使生活变得更加轻松。

如果只想在某些页面（不是全部）上加载脚本，则可以通过template.php文件添加脚本。只需添加类似于以下代码：

function YourTheme_preprocess_node(&$variables) {

 $node = $variables['node'];
if (!empty($node) && ($node->nid == 983)
 // here you can esily add more pages
) {

drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.core.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/jquery-ui-1.7.3.custom.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.progressbar.js');

drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.progressbar.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.core.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.theme.css');
 }
}

我仅在Drupal 6中对此进行了测试。

通过script[] =在正在使用的主题的.info文件中添加一行，可以将JavaScript文件添加到在Drupal站点中使用的主题。仅当您使用自定义主题或已重命名的现有主题的修改版本时，我才会考虑这种情况；如果您使用的是Garland，我不建议您这样做。在这种情况下，这样做将意味着在每次更新主题时都将丢失所有更改，或者将复制更新的主题文件，然后重新应用应用于文件先前版本的相同更改；如果更改仅添加了script[]一行，则更改很小，可能值得这样做，但这也意味着JavaScript文件未添加到包含主题文件的目录中，或者您应该在每个JavaScript文件中添加主题更新的时间。

或者，您可以创建一个自定义模块，或将代码添加到该站点已在使用的现有自定义模块中。
优点是将JavaScript文件添加到每个主题都设置为默认主题或管理​​主题，而无需更改网站上启用的所有主题，用户可以自己选择。

正如已经在另一个答案中报告的那样，hook_init()您应该实现钩子。我将添加的hook_library()是Drupal 7中为jQuery插件之类的Javascript文件添加的新钩子。

您可以使用Js Injector模块直接在Drupal管理面板中添加脚本。另外，您可以使用drupal_add_js（）函数将js文件添加到页面。

您可以创建一个简单的自定义模块并以这种方式添加它。该代码将类似于以下内容：

MYMODULE_init() {
  drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/FILE.js');
}

YOURTHEME_preprocess_theme()如果要应用逻辑条件，则可以简单地使用in ：

drupal_add_js(drupal_get_path('theme','your_theme').'/js/yourplugin.js');

并在yourtheme.info文件中添加：

scripts[] = js/yourplugin.js

如果您正在使用上下文模块，请安装上下文添加资产。设置全局上下文或特定上下文，并添加新的响应以按路径或按模块添加JS资产。

无需编码。

现在有许多外部库需要包含。

将它们全部放在主题的js目录下并不总是可取的，因为有时这些库由多个js文件和多个css文件组成。

我最终使用libraries_get_path库模块的功能从site / all / libraries目录获取它们的路径：

这是我添加与textext.js相关的选定文件的方式：

<?php 
function MYMODULE_init() {

  // Add jQuery library to a specific page.
  if (arg(0) == 'messages' && arg(1) == 'new') {
    // Add the jQuery TextExt library ( http://textextjs.com/ )
    $libdir = libraries_get_path('jquery-textext');
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.plugin.tags.js");
    drupal_add_js("$libdir/src/js/textext.plugin.autocomplete.js");
    drupal_add_js("$libdir/src/js/textext.plugin.suggestions.js");
    drupal_add_js("$libdir/src/js/textext.plugin.filter.js");
    drupal_add_js("$libdir/src/js/textext.plugin.focus.js");
    drupal_add_js("$libdir/src/js/textext.plugin.prompt.js");
    drupal_add_js("$libdir/src/js/textext.plugin.ajax.js");
    drupal_add_js("$libdir/src/js/textext.plugin.arrow.js");

    drupal_add_css("$libdir/src/css/textext.core.css");
    drupal_add_css("$libdir/src/css/textext.plugin.tags.css");
    drupal_add_css("$libdir/src/css/textext.plugin.autocomplete.css");
    drupal_add_css("$libdir/src/css/textext.plugin.focus.css");
    drupal_add_css("$libdir/src/css/textext.plugin.prompt.css");
    drupal_add_css("$libdir/src/css/textext.plugin.arrow.css");
  }

} ?>

我很想听听是否有一个外部存储库，其中所有这些库都是预定义的，所以我不必手动定义它们。

我建议您从公共Google CDN加载jQuery。检查此链接以获取更多信息：http : //code.google.com/apis/libraries/devguide.html#jquery。请确保不要在您的网站中多次加载相同的脚本。

这对我有用，不需要为jQuery插件创建模块或安装一个模块-在我添加的template.php中：

function YOURTHEME_js_alter(&$javascript){
    // overwriting for newer jQuery version
    $javascript['misc/jquery.js']['data'] = path_to_theme() . '/assets/js/jquery-1.9.0.js';
    // also the min...
    $javascript['misc/ui/jquery.ui.core.min.js']['data'] = path_to_theme() . '/assets/js/jquery-ui-1.10.0.custom.min.js';
    // here I add the library (jQuery plugin) to resolve an error -> $.browser.msie undefined
    $javascript[path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js'] = array(   
        "group" => -100,
        "weight" => -18.990,
        "version" => "1.1.0",
        "every_page" => true,
        "type" =>   "file",
        "scope" => "header",
        "cache" => true,
        "defer" => false,
        "preprocess" => true,
        "data" =>  path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js',
    );

}

另一种方法是将以下代码添加到page.tpl.php文件
drupal_add_js（drupal_get_path（'theme'，'path / to / your / plugin'）。'/plugin.js'，'file'）;