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