Thứ Hai, 21 tháng 2, 2011

Tự tạo plugin với jquery

Khi viết các ứng dụng sử dụng jquery hay với bất kỳ một ngôn ngữ nào khác , thì việc sử dụng lại code là một điều khá quan trọng, Với jquery bạn có thẻ tự tạo các plugin mà sau này chỉ cần gọi lại plugin là bạn có thẻ sử dụng được.

Bài viết này được tham khảo tại : http://docs.jquery.com/Plugins/Authoring.

Mình có một vd sau:

<html>
<head>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript">
(function(){
pos={
start:0,
stop:500
};
var methods = {
abc:function(poss){
var obj = $.extend(pos,poss);
this.animate({
left:obj['stop']+"px"
},1000).animate({
left:obj['start']+"px"
},1000);
}
};
$.fn.demo = function(method,pos){
if(methods[method]){
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}
};
})(jQuery);

$(document).ready(function(){
$('#click').click(function(){
setInterval(function(){
$("#test").fadeIn().demo("abc",{start:"100",stop:"900"});
},2001);
});
});
</script>
</head>
<body>
<div id='test' style="position:absolute;width:100px;height:100px;background:red;display:none;">test cai nao</div>
<a href="#" id='click'>click</a>
</body>
</html>

Ở vd này mình tạo ra một hàm demo ,hàm này sẽ nhận phương thức  va thuộc tính truyền vào(thuộc tính có thể tam hiểu là các đối số mà bạn muốn truyền vào.

Ở vd trên mình truyền vào phương thức abc và thuộc tính poss co hai giá trị la start và stop.Hàm demo sẽ có nhiệm vụ kiểm tra xem phương thức truyền vào có không và gọi phương thức đó nếu nó tồn tại.

if(methods[method]){ //kiểm tra phương thức
return methods[method].apply(this,Array.prototype.slice.call(arguments,1)); //gọi phương thức

Đoạn dài ngoằng ở sau .apply(this,Array.prototype.slice.call(arguments,1)); đây là đoạn truyền tham số cho phương thức abc (arguments,1) xác nhận thược tính poss là tham số truyền vào cho phương thức abc(vì pos ở vị trí số 1,số 0 tính từ method),giả sử sau poss có poss1 thi muốn truyền poss1 bạn thay số 1 thành 2 la ok :).

Bây giơ tạo ra phương thưc abc bằng khai báo.

var methods ={abc:function(poss){}};

var obj = $.extend(pos,poss); dòng này xác nhận xem có tham số truyền vào abc hay không.Nếu có thì nhận tham số truyền vào,không thi lấy giá trị mặc định.Các dòng khác chắc minh không cần giải thích gì thêm vì nó đã quá wen thuộc rồi :D.

Chúc các bạn thành công :D.

Không có nhận xét nào:

Đăng nhận xét