跳转到主要内容

7.4 Drupal中的JS 的写法

ok,经过上面的学习,你已经学会如何引入js语句了,那么在Drupal中js的写法有什么特殊之处呢?

假设,我们的jQuery文件内容如下——它看上去和平常的jQuery代码没有什么区别:

$(document).ready(function(){
    $(‘h1’).addClass('my-class');
});

如果我们直接引入这个文件,在Drupal中就会出现本章第一节中第7点所提到的错误,解决方案如下:

1  用jQuery代替美元符号$:

jQuery(document).ready(function(){
 
    $(‘h1’).addClass('my-class');
 
});

2 用下面红色代码包围原始文件:

(function($){

    $(document).ready(function(){

        $(‘h1’).addClass('my-class');

    });

})(jQuery);

另外,由于在jQuery中        //https://api.jquery.com/ready/

$( document ).ready(function() {
 
  // Handler for .ready() called.
 
});

$(function() {
 
  // Handler for .ready() called.
 
});

是等效的,所以你也可以把上面的代码写为:

(function($){

    $(function() {

        $(‘h1’).addClass('my-class');

    });

})(jQuery);

 

3 用drupal7自己的 behaviors

(function($){
 
    Drupal.behaviors.behaviorName = {
 
          attach: function (context, settings) {
 
            $(‘h1’).addClass('my-class');
 
        }
 
    };
 
})(jQuery);

我们还可以将context变量作为jQuery选择器的第二个参数,这样效率更高。所以代码还可以写成这样:

(function($){
 
    Drupal.behaviors.behaviorName = {
 
          attach: function (context, settings) {
 
            $(‘h1’, context).addClass('my-class');
 
        }
 
    };
 
})(jQuery);