jQuery插件的實現
這兩天一直在研究jQuery的插件問題,發現了其中一些問題 ,寫在這里供以后記憶,以下是js代碼:
<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 style="position:absolute; left:' + (w - 10 - liCount * 20) + 'px; top:' + (h - 25) + 'px;">';
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) {
self.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></pre>
此方法實現了圖片的淡出效果;總結了一個自己的jQuery的插件框架,自己日常用足夠。在此希望高手指出不足之處,小弟謝過。。。
以下是個人總結的jQuery的插件框架: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"});
});
</pre>轉自:http://blog.csdn.net/tanguooo19866/article/details/7255992
本文由用戶 openkk 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!