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

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

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Máy tính bảng Google Nexus sẽ ra mắt vào tuần tới

Máy tính bảng Google Nexus sẽ ra mắt vào tuần tới

Chủ tịch của Google, Eric Schmidt đã lên tiếng thừa nhận hãng đang tiến hành sản xuất chiếc máy tính bảng đầu tiên sau quãng thời gian dài chờ đợi.

[Drupal] Cách làm responsive theme (template) cho mobile

Hiện nay càng ngày càng có nhiều người sử dụng điện thoại, máy tính bảng để truy cập internet thay vì dùng máy tính. Vì vậy việc thay đổi giao diện web cho phù hợp với chiều rộng màn hình thiết bị đóng vai trò khá quan trọng.

Các bước cài đặt Drupal 8 trên Pantheon

 Spinning up a D8 site is just as easy as spinning up any Drupal site on Pantheon, but just in case you need a refresher, here’s how it’s done: 

Công ty diệt chuột T&C

 

Diet con trung