Cuối cùng là demo viết 1 plugin đơn giản là lấy giá vàng và ngoại tệ từ trang vnexpress

Để đơn giản mình chỉ trình bày phần lấy giá vàng còn ngoại tệ thì tương tự

Để minh họa rõ hơn bạn vào trang vnexpress

hoặc batdongsandaison.com

Cột lõi vấn đề là ở trang vnexpress có các file js luôn cập nhật các tỷ giá, giá vàng, kể cả thời tiết… Mình chỉ cần móc file đó ra mà sài rồi cộng chuỗi HTML vào là xong.

VD : file : http://vnexpress.net/Service/Gold_Content.js

Có nội dung như sau:

Còn file : http://vnexpress.net/Service/Forex_Content.js

Mình sẽ viết 1 jQuery plugin để lấy 2 thông tin trên khi sài chỉ cần viết hàm như sau:

Là có thông tin giá vàng và ngoại tệ cho website của bạn, giờ chỉ cần style CSS lại là ok.

Trước tiên;

Các hàm định nghĩa trong plugin phải bọc trong đoạn code như sau:

(function($)
{
	//your code here
})(jQuery);

Sau đó định nghĩa 1 số tham số default:

$.CURVN = {};// new 1 object để chứa tham số default và tham số toàn cục
$.CURVN.defaults =
{
	GoldContentUrl: "http://vnexpress.net/Service/Gold_Content.js" , // URL file giá vàng
	ForexContentUrl: "http://vnexpress.net/Service/Forex_Content.js", //URL file chứa ngoại tệ
	ClassName: "" //tên class của thẻ table lúc gen code, dùng để style css sau này (có thể không cần đến)
};
$.CURVN.settings = {};

Tiếp sau định nghĩa hàm main dùng để gen code giá vàng.

$.fn.genGoldPrice = function(user_setting)
	{
	//merge tham số default và tham số người dùng.
	$.CURVN.settings = $.extend({}, $.CURVN.defaults , user_setting);
	var _this = this; // keyword this chỉ đến 1 wrapped set, không phải là 1 element
	$.getScript($.CURVN.settings.GoldContentUrl, function()
	{
		_this.append($.createHTMLGoldPrice($.CURVN.settings.ClassName));
	});
	return _this;
};

Trong hàm main, mình có sử dụng 1 hàm $.getScript

Hàm này có cần 2 tham số, tham số 1 là URL của file js rồi execute file này, tham số thứ 2 là 1 hàm callback sẽ được gọi khi file js được execute xong.

Còn hàm $.createHTMLGoldPrice là 1 loại hàm Utility Function, có nhiệm vụ trả về code được gen ra cho hàm append .

Sau đây nội dung của Utitlity Function $.createHTMLGoldPrice

$.createHTMLGoldPrice = function(classname)
{
	var str = "</p>
	<table class='" + classname + "' >";
	str += "<tr><td>" + "Loại" + "</td><td>" + "Mua" + "</td><td>" + "Bán" + "</td></tr>";
	str += "<tr class='even'><td>" + "SBJ" + "</td><td>" + vGoldSbjBuy + "</td><td>" + vGoldSbjSell + "</td></tr>";
	str += "<tr><td>" + "SJC" + "</td><td>" + vGoldSjcBuy + "</td><td>" + vGoldSjcSell + "</td></tr>";
	str += "</table>";
	return str;
}

Link demo : http://www.dttung.info/example/currencyvn/Test_currencyvn.html

Dowload Sourcecode : http://www.dttung.info/example/currencyvn/currencyvn.zip

Link download toàn bộ series bài viết bằng file word: http://www.dttung.info/download/How%20to%20write%20your%20own%20jQuery%20plug-in.zip

HCM, 23/05/2010
Editor: Đặng Thanh Tùng