Viết Plugin Cho JQuery - NTuts

Tôi đã từng giới thiệu rất nhiều plugin của jQuery trên vannyneo. Thực sự đó là những plugin rất hay, nếu bạn muốn viết plugin của riêng mình nhưng chưa biết bắt đầu từ đâu thì hãy xem bài viết này.

Tôi sẽ hướng dẫn các bạn viết plugin dựa trên kiến thức 5 bài hướng dẫn jQuery cơ bản đã đưa trên vannyneo. Plugin tạo hiệu ứng chuyển động khi di chuột vào menu. Trước tiên tôi đặt tên plugin của mình là neoAnimateMenu.

Cấu trúc HTML và cách không sử dụng plugin

Cấu trúc mã HTML:

<ul id="menu"> <li><a href="#">Trang chủ</a></li> <li><a href="#">Tổng hợp</a></li> <li><a href="#">Hướng dẫn</a></li> <li><a href="#">Miễn phí</a></li> <li><a href="#">Liên hệ</a></li> </ul>

Nếu sử dụng hiệu ứng chuyển động không cần plugin, mã javascript sẽ như sau:

$(document).ready(function() { $('ul#menu li a').mouseover(function() { $(this).animate( { paddingLeft:"20px" }, 300); }).mouseout(function() { $(this).animate( { paddingLeft:"0" }, 300); }); });

Cấu trúc cơ bản của plugin như sau:

//Bạn cần đặt function quanh $ để tránh trường hợp bị trùng lặp (function($){ // Thông báo phương thức tới jQuery $.fn.extend({ //Đây là phần bạn viết tên plugin neoanimatemenu: function() { // Kiểm tra từng element và xử lý return this.each(function() { //Thêm mã xử lý ở đây }); } }); })(jQuery);

Nhưng nếu viết plugin, chúng ta sẽ chỉ cần gọi:

$(document).ready(function() { $('#menu').neoAnimateMenu({ padding:20 }) });

Cấu trúc của plugin

Thêm các lựa chọn mặc định cho plugin:

(function($){ $.fn.extend({ // truyền biến options vào hàm neoAnimateMenu: function(options) { // Đặt các giá trị mặc định, sử dụng dấu phẩy để chia từng giá trị var defaults = { padding: 20, mouseOverColor : '#000000', mouseOutColor : '#ffffff' } var options = $.extend(defaults, options); return this.each(function() { var opts = options; //Thêm mã xử lý ở đây alert(opts.padding); }); } }); })(jQuery);

Từ cấu trúc trên, chúng ta sẽ sửa thành plugin neoAnimateMenu như sau:

(function($){ $.fn.extend({ neoAnimateMenu: function(options) { // Đặt các giá trị mặc định var defaults = { animatePadding: 60 }; var options = $.extend(defaults, options); return this.each(function() { var opts =options; // Đặt tên biến cho element (ul) var obj = $(this); // Lấy tất cả thẻ li trong ul var items = $("li a", obj); // Thêm sự kiện mouseover và mouseout vào thẻ a items.mouseover(function() { // lúc này this chính là thẻ a $(this).animate({paddingLeft: opts.animatePadding}, 500); }).mouseout(function() { $(this).animate({paddingLeft: '0'}, 500); }); }); } }); })(jQuery);

Bạn có thể tải về plugin ở đây

Sau bài này bạn đã có thể viết plugin của riêng mình. Have fun

‹ Bài 7: Phương thức hover() up Hướng dẫn ›