jquery 插件開發備注

2019-11-21 00:16:28

字體：大中小

來源：轉載

供稿：網友

今天發現其實JQ自己早就有對這個臨時數據的存儲方法:

$("dom").data(“mydata”,"this is data");還有就是插件開發的時候我們經常要給插件添加方法,其實就用JS內部添加方法的方法即可

this.myfn=function(){}

下面給上一個顯示部分文字的插件的源碼:

(類似CSS的text-overflow,但本插件你需要提供顯示幾個字,用于精確控制顯示數量)

復制代碼代碼如下:

 
/** 
* demo: 
* 1.$("#limittext").limittext(); 
* 2.$("#limittext").limittext({"limit":1}); 
* 3.$("#limittext").limittext({"limit":1,"fill":"(部分隱藏)","fillid":"aaa"}); 
* 4.$("#limittext").limittext({"limit":1,"fill":"(部分隱藏)","fillid":"aaa"}).limit(10); * 5.$("#limittext").limittext({"limit":1,"fill":"(部分隱藏)","fillid":"aaa"}).limit('all'); 
* @param {Object} opt 
* @author Lonely * @link http://liushan.net 
*/ 
jQuery.fn.extend({ 
limittext:function(opt){ 
opt=$.extend({ 
"limit":30, 
"fill":"...", 
"fillid":null 
},opt); 
var $this=$(this); 
var body=$(this).data('body'); 
if(body==null){ 
body=$this.html(); 
$(this).data('body',body); 
} 
this.limit=function(limit){ 
if(body.length<=limit||limit=='all') 
var showbody=body; 
else{ 
if(opt.fillid==null) 
var showbody=body.substring(0,limit)+opt.fill; 
else 
var showbody=body.substring(0,limit)+"<span id='"+opt.fillid+"'>"+opt.fill+"<span>"; 
} 
$(this).html(showbody); 
} 
this.limit(opt.limit); 
return this; 
} 
}); 