Linux教程網 >> Linux編程 >> Linux編程 >> jQuery插件的實現

jQuery插件的實現

日期：2017/3/1 10:32:40 编辑：Linux編程

一直在研究jQuery的插件問題，發現了其中一些問題，寫在這裡供以後記憶，以下是js代碼：

[html]

<script type="text/javascript">
if (jQuery)(function($) {
//定義Testl類屬性為params
var liCount = 0 ;
var Test = function(){
this.params = { "daley": 5 };
this.index = 0;
this.enable = true;
};
//定義方法為create 參數是src（jQuery對象指向div） data是對象傳進來的{daley:3}
Test.prototype = {
create : function(src,data){
var self = this;
self.src = src;
//將Test的屬性和傳入的data融合返回對象（data將覆蓋this.params）
self.params = $.extend({}, self.params,data);
//添加業務邏輯
src.addClass("moive");
var w = src.width();
var h = src.height();
var liArray = src.find("li");
liCount = liArray.size();
if (liCount > 1) {
var str = '<div >';

for (var i = 1; i <= liCount; i++) {

str += '<span class="txt">' + i + '</span>';

}

str += '</div>';

src.append(str);

src.find("li:gt(0)").hide();//大於0的li元素隱藏

src.find("span:first").addClass("selected");

var spanArray = src.find("span");

spanArray.bind("click", function() {

self.index = $(this).text() - 1;

if (self.index >= self.count) return;

spanArray.removeClass("selected");

$(this).addClass('selected');

liArray.hide().eq(self.index).fadeIn("slow");

//實現圖片淡出也可以自定義其他圖片顯示效果

});

self.t = setTimeout(function() { self.showAuto(); }, self.params.daley * 1000);

src.hover(function() {

self.enable = false;

clearTimeout(self.t);

function(){

self.enable = true;

clearTimeout(self.t);

self.t = setTimeout(function() { self.showAuto(); },self.params.daley * 1000);

});

}

showAuto: function() {

var self = this;

if (self.enable) {

selfself.index = self.index >= (liCount - 1) ? 0 : self.index + 1;

self.src.find("span").eq(self.index).trigger('click');

clearTimeout(self.t);

self.t = setTimeout(function() { self.showAuto(); }, self.params.daley * 1000);

}

//業務邏輯結束

};

$.fn.extend({"xdMoive":function(method){

var create1 = function(src, data){

if(src.tagName.toLowerCase()!='div')

return;

src1=$(src); //將DOM對象轉換為jQuery對象

if(src1.data("xdMoive")!=undefined)

return;

var test = new Test();

test.create(src1,data);

src1.data("xdMoive",test);

}

switch(method) {

default:

$(this).each(function(){

//alert(this.tagName.toLowerCase());

create1(this,method);//此時this是DOM對象指向div

});

break;

}

//alert($(this).attr("class"));

return $(this);//此時$(this)是jQuery對象指向div

}

});

})(jQuery);

//調用閉包方法

$(function(){

$(".div").xdMoive({daley:2});

});

</script>

此方法實現了圖片的淡出效果；總結了一個自己的jQuery的插件框架，自己日常用足夠。在此希望高手指出不足之處，小弟謝過。。。

以下是個人總結的jQuery的插件框架：

[javascript]

if(jQuery)(function($){
var Ctl=function(){
this.params={width:"100px", height:"10px", text:"test"}
}
Ctl.prototype={
create:function(src, data) {
var self = this;
self.src = src;
self.params = $.extend({}, self.params,data);
//業務邏輯的實現
src.width(self.params.width);
src.height(self.params.height);
src.val(self.params.text);
}
};
$.fn.extend({"xdText":function(method){
var create1 = function(src, data){
if(src.tagName.toLowerCase()!='textarea')
return;
src1=$(src);
if(src1.data("xdText")!=undefined)
return;
var ctl=new Ctl();
ctl.create(src1,data);
src1.data("xdText",ctl);
}
switch(method) {
default://默認情況下執行
$(this).each(function(){ //$(this)指向的是xdTest本身<pre name="code" class="javascript"> create1(this,method);//將調用此方法的DOM對象傳入（這裡的this指向的是textarea），method指向的是{text:"..",
//height:"100px"}<pre name="code" class="javascript"><pre name="code" class="javascript"> });
break;
}
//alert($(this).height()+'qqq222');
return $(this);//返回調用時候傳入的DOM對象
}
});
})(jQuery)
$(function(){//調用此插件的對象
$("textarea").xdText({text:"hello world",height: "100px"});
});