如何让jquery在Drupal 7上工作-适用于新手


8

我已经在线阅读了许多有关如何使jquery在drupal 7上运行的教程。尽管有许多行代码和示例,但我找不到的是将什么代码放在哪里(也许对于大多数开发人员来说是显而易见的)

所以,我要做的是

1)我创建一个新的自定义块

2)在那儿从drupal UI,我写我的代码

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3)我显示块,但没有加载jQuery。

我读到我应该将此代码放在模板文件,主题文件,css文件,信息文件中,我不知道这是什么!

我不清楚上面的代码必须在哪个文件中以及在哪个路径中才能正常工作?

有什么建议吗?

非常感谢!

Answers:


11

这里有几件事:

  1. 如果您可以避免通过UI将javascript和PHP输入网站,则可能会省去麻烦。如果您没有其他选择,那么可以,但是出于某些原因,这不是一个好主意:https : //drupal.stackexchange.com/a/2512/10729(请注意,它针对的是PHP,而不是js,但大多数针对这些点仍然代表js)。的实例模块具有创建自定义块的一例。
  2. 对于附加js,如果要在所有页面上附加js,可以将其添加到主题的信息文件中。但是,如果仅在某些地方需要它,最好使用drupal_add_js(),以便仅在需要的页面上使用。要将js行为附加到表单,您还可以在表单项上使用#attached属性。
  3. 如果您使用$(document).ready(),它将在页面加载时触发您的javascript,但是如果通过ajax更新页面,则您的javascript将不会再次触发,因此新标记不会受到任何javascript的影响是。要处理这些情况,您应该使用drupal 行为而不是准备文档。

例如:

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
      // Do your thing here.
    }
  };
})(jQuery);

我建议阅读以下页面:
在Drupal 7中管理JavaScript
使用JavaScript和jQuery


7

在您的.js文件中插入如下代码:

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

     // All our js code here
     alert('Hello jQuery');
     // end our js code

   }

 };})(jQuery);

在您的主题template.php中创建hook_preprocess_html,然后使用drupal_add_js

function themename_preprocess_html(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'themename') . '/js/your.js', array( 
    'scope' => 'footer', 
    'weight' => '15' 
  ));
}

只需更改主题名称


1
请注意,这会将javascript添加到每个页面,这可能是不希望的。
rooby

1
嘿,是的,这会将javascript添加到每个页面。只要让@apdr尝试并用他的知识进行测试
sibiru

2
如果您希望通过主题将js加载到每个页面上,那么只在主题的.info文件中列出文件就没有任何意义了吗?
Jimajamma

3

您的.js文件应如下所示:

(function ($) {
    Drupal.behaviors.cdgi = {
        attach: function(context) {

        //your code

        }
    }
}(jQuery));

在模块中使用drupal_add_js()将文件添加到Drupal中。这里这里很好的参考。

经常清除缓存;)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.