Hướng dẫn thêm javascript vào Drupal 7

Javascript, Jquery là những cái tên đã quá đỗi quen thuộc nó là 1 ngôn ngữ lập trình kịch bản (Script) được sử dụng để chạy trên máy khách, nó giúp trang web của chúng ta có thể tạo các sự kiện (event), các hiệu ứng web (effect), Jquery là 1 thư viện của javascript , việc sử dụng jquery đem lại những lợi ích to lớn cho trang web, và hôm nay chúng ta sẽ đi tìm hiểu cách thức tạo 1 file js và thêm nó vào Drupal

Để thêm javascript vào drupal thì ta có 3 cách liệt kê dưới đây.

• Thêm vào file .info
• Thêm vào template (không khuyến khích)
• Thêm vào bằng hook,preprocess,process

Thêm javascript file chứa jquery

Mặc định thì khi thêm JS file bằng hàm drupal_add_js thì Drupal đã tự động add thêm thư viện jquery của chính nó tại thư mục misc/jquery.js.Nhưng các thư viện js ngoài bg thì thường dùng ký hiệu $ thay cho Jquery.Bản thân mình khi viết cũng hay dùng $ thay Jquery.Drupal thì không hiểu ký hiệu $ vì để tương thích với nhiều thư viện khác như prototype.Để giải quyết vấn đề trên thì ta chỉ cần bao đoạn code jquery đó trong hàm bao.

Dùng hàm bao sau :

(function ($)
{ ...
//add code jquery thuần ở đây
})(jQuery);

Hàm bao (function ($) { ... })(jQuery); cho phép sử dụng biến $ thay vì jQuery đơn thuần.Việc làm đó khiến tích hợp Drupal với các thư viện khác bên ngoài một cách đơn giản hơn mà không phải sửa nhiều.

Trong hàm bao này,bạn vẫn phải đợi các phần tử DOM được tải.Để có thể cho javascript thực thi sau khi DOM được load hoàn tất thì ta có thể dùng hàng động ready của Jquery :

(function ($)
{ ...
   $.ready(function(){
    ...
    //add code jquery thuần ở đây
   })
})(jQuery);;

Nhưng ngoài cách trên thì Drupal cung cấp một cách khác,đó là sử dụng behavior

(function ($)
{ ...
   Drupal.behaviors.abc = {
    attach: function(context, settings) {
    ...
    //add code jquery thuần ở đây
   }}
})(jQuery);

Ở đây abc là tên theme hay module mà file js đó đang được đặt.

Tham khảo Managing JavaScript in Drupal 7