jQuery 如何将 JS 添加到 Drupal 7
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6571216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add JS to Drupal 7
提问by Daniel Johnson
I want to add the Forrst Sapfeature to a Drupal 7 website.
我想将Forrst Sap功能添加到 Drupal 7 网站。
Firstly, this involves adding the jquery.sap.js script to the site which I can do via my themes .info file. I understand I must replace that jQuery is now namespaced to avoid conflicts with other Javascript libraries such as Prototype. All your code that expects to use jQuery as $ should be wrapped in an outer context like so.
首先，这涉及将 jquery.sap.js 脚本添加到我可以通过我的主题 .info 文件完成的站点。我知道我必须替换 jQuery 现在已命名空间以避免与其他 Javascript 库（例如 Prototype）发生冲突。所有希望使用 jQuery 作为 $ 的代码都应该像这样包装在外部上下文中。
(function ($) {
// All your code here
}(jQuery));
But I'm unsure as to how to specify the Drupal behaviours for this code?
但我不确定如何为这段代码指定 Drupal 行为？
Secondly, I must add the inline code:
其次，我必须添加内联代码：
$('#item').sap({
distanceFromTheTop: 0
});
I believe I can do this with drupal_add_js but again I'm not sure how to go about this through the template.php file?
我相信我可以用 drupal_add_js 做到这一点，但我又不确定如何通过 template.php 文件来做到这一点？
Thanks for your help!
谢谢你的帮助！
回答by Adam S
Here is a little boilerplate code for adding a javascript file to Drupal.
这是用于向 Drupal 添加 javascript 文件的一些样板代码。
(function ($) {
Drupal.behaviors.[myName] = {
attach: function(context, settings) {
//Begin my code
var myVarOne,
myVarTwo;
$('#item').sap({
distanceFromTheTop: 0
});
//I'm done with my code
}
};
})(jQuery);
drupal_add_js()is a great function to use in code to add js files because they will be aggregated contextually so some pages can have huge js scripts but they won't be loaded in the cached aggregated js file on other page loads.
drupal_add_js()是在代码中用于添加 js 文件的一个很好的函数，因为它们将在上下文中聚合，因此某些页面可以具有巨大的 js 脚本，但它们不会在其他页面加载时加载到缓存的聚合 js 文件中。
If you need the script on everypage or if it's small then add it through the [template_name].info file by using scripts[] = myscript.jsor if your template folder has a subfolder for scripts called js then use scripts[] = js/myscript.js
如果您需要每个页面上的脚本或者它很小，则使用 [template_name].info 文件添加它，scripts[] = myscript.js或者如果您的模板文件夹有一个名为 js 的脚本子文件夹，则使用scripts[] = js/myscript.js
p.s. Have a look at drupal.stackexchange.com
回答by sisko
I used the following line to successfully add javascript code to my drupal site:
我使用以下行成功地将 javascript 代码添加到我的 drupal 站点：
drupal_add_js(drupal_get_path('module', 'my_module') .'/js/mycode.js', array('type' => 'file', 'scope' => 'footer'));
And the following line to pass a simple variable data to the above included /js/mycode.js:
下面这行将一个简单的变量数据传递给上面包含的/js/mycode.js：
drupal_add_js(array('my_module' => array('key' => 'value', ''))), 'setting');
The above variable is accessible in mycode.jsvia the following:
可以通过以下方式在mycode.js 中访问上述变量：
Drupal.settings.my_module.key;
PS:while you are attempting to include the .js file via template.php, I successfully use the above code in a custom module.
PS：当您尝试通过 template.php 包含 .js 文件时，我成功地在自定义模块中使用了上述代码。
I'm not sure if my exact solution would work with your strategy.
我不确定我的确切解决方案是否适用于您的策略。
回答by SynapseIndia
We can add JS in drupal by following method
我们可以通过以下方法在drupal中添加JS
1.)By drupal_add_js()function
1.)按drupal_add_js()功能
drupal_add_js()is drupal api function to include js.
drupal_add_js()是包含js的drupal api函数。
Example:
例子：
drupal_add_js('misc/collapse.js');
// add JS file
// 添加JS文件
drupal_add_js('misc/collapse.js', 'file');
// For including inline javascript
// 用于包含内联 javascript
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');
//For including inline javascript and includ and includ it in footer
//用于包含内联javascript和includ并将其包含在页脚中
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', array(
'type' => 'inline',
'scope' => 'footer',
'weight' => 5,
));
//For including External JS
//用于包含外部JS
drupal_add_js('http://example.com/example.js', 'external');
//For passing php value to JS
//用于将php值传递给JS
drupal_add_js(array(
'myModule' => array(
'key' => 'value',
),
), 'setting');
Example:
例子：
drupal_add_js(drupal_get_path('module', 'mymodule') . '/mymodule.js');
for more infomation visit https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7.x
有关更多信息，请访问https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7.x
2.)Adding by Form API
2.)通过表单API添加
we can used '#attached' property of form api for including js
我们可以使用表单 api 的 '#attached' 属性来包含 js
Example:
例子：
$form['#attached']['js'] = array(
drupal_get_path('module', 'ajax_example') . '/ajax_example.js',
);
3.)Adding JS in info file
3.) 在 info 文件中添加 JS
We can including javascript in script file
我们可以在脚本文件中包含 javascript
Example:
例子：
name = My theme
description = Theme developed by me.
core = 7.x
engine = phptemplate
scripts[] = mytheme.js
4.)By preprocess function
4.)通过预处理功能
if we want to conditionaly include JS we can include it in preprocess function
如果我们想有条件地包含 JS，我们可以将它包含在预处理函数中
function mytheme_preprocess_page(&$vars, $hook) {
if (true) {
drupal_add_js(drupal_get_path('theme', 'mytheme') . '/mytheme.js');
$vars['scripts'] = drupal_get_js(); // necessary in D7?
}
}
