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

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.
10 + 4 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

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

 
Web Developer

10 bước để trở thành Web Developer giỏi

For those of us who are already web developers it may seem obvious but when you just getting started and don’t know what to do, it is nice to have guide where to start.

Ngoại trưởng Anh Dominic Raab tại cuộc họp báo về Covid-19 ở Văn phòng Thủ tướng tại số 10 phố Downing, London hôm 16/4

Ngoại trưởng Dominic Raab - Anh đòi Trung Quốc trả lời câu hỏi hóc búa về Covid-19

Ngoại trưởng Dominic Raab tại cuộc họp báo về Covid-19 ở Văn phòng Thủ tướng tại số 10 phố Downing, London hôm 16.4.2020 cho hay Anh

Bài 5:Học sinh lập trình Scratch - Làm quen với biến

Bài 5:Học sinh lập trình Scratch - Làm quen với biến

Bạn đã làm được hai trò chơi: “Mèo nhí diễu hành” và “Dơi bắt chuột, chuột ăn chuối”. Bạn nên hướng dẫn cho bé tự làm từ đầu thật thạo hai trò chơi đó trước khi chuyển qua bước tiếp theo

BLOG POSTS

 

Wordpress Freelancer

 

Wordpress Freelancer