快捷導(dǎo)航

jquery 插件開(kāi)發(fā)備注

更新時(shí)間：2010年08月27日 19:30:52 作者：

以前針對(duì)DOM元素的插件(即$.fn.)存臨時(shí)數(shù)據(jù)都加在當(dāng)前元素上建個(gè)特殊的屬性來(lái)存,(JQ內(nèi)部直接也搞這樣的)

今天發(fā)現(xiàn)其實(shí)JQ自己早就有對(duì)這個(gè)臨時(shí)數(shù)據(jù)的存儲(chǔ)方法:

$("dom").data(“mydata”,"this is data");還有就是插件開(kāi)發(fā)的時(shí)候我們經(jīng)常要給插件添加方法,其實(shí)就用JS內(nèi)部添加方法的方法即可

this.myfn=function(){}

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

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

復(fù)制代碼代碼如下:

 
/** 
* 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; 
} 
}); 

您可能感興趣的文章:

插件開(kāi)發(fā)

相關(guān)文章

jQuery實(shí)現(xiàn)菜單顯示效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)菜單顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
在JavaScript的jQuery庫(kù)中操作AJAX的方法講解
這篇文章主要介紹了在JavaScript的jQuery庫(kù)中操作AJAX的方法講解,包括利用jQuery簡(jiǎn)化Ajax開(kāi)發(fā)部分的內(nèi)容,需要的朋友可以參考下
2015-08-08
jQuery Easyui快速入門(mén)教程
jQuery EasyUI是一組基于JQuery的UI插件集合，而JQueryEasyUI的目標(biāo)就是幫助開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的UI界面，下面小編帶領(lǐng)大家一起學(xué)習(xí)jquery easyui入門(mén)知識(shí)，一起看看吧
2016-08-08
老生常談jquery id選擇器和class選擇器的區(qū)別
下面小編就為大家?guī)?lái)一篇老生常談jquery id選擇器和class選擇器的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
從零開(kāi)始學(xué)習(xí)jQuery (六) jquery中的AJAX使用
本篇文章講解如何使用jQuery方便快捷的實(shí)現(xiàn)Ajax功能.統(tǒng)一所有開(kāi)發(fā)人員使用Ajax的方式.
2011-02-02
jQuery插件之jQuery.Form.js用法實(shí)例分析(附demo示例源碼)
這篇文章主要介紹了jQuery插件之jQuery.Form.js用法,結(jié)合實(shí)例形式分析了jQuery.Form.js的具體使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-01-01
jQuery.query.js 取參數(shù)的兩點(diǎn)問(wèn)題分析
最近在項(xiàng)目中使用jQuery.query.js這個(gè)插件進(jìn)行頁(yè)面間URL傳值，遇到如下兩點(diǎn)問(wèn)題
2012-08-08
jQuery控制圖片的hover效果（smartRollover.js）
圖片的hover效果可以用css來(lái)實(shí)現(xiàn)也可以用js來(lái)實(shí)現(xiàn)。典型的就是smartRollover.js
2012-03-03
基于jquery實(shí)現(xiàn)的仿優(yōu)酷圖片輪播特效代碼
這篇文章主要為大家介紹了基于jquery實(shí)現(xiàn)的仿優(yōu)酷圖片輪播特效代碼，感興趣的小伙伴們可以參考一下
2016-01-01
jquery插件autocomplete用法示例
這篇文章主要介紹了jquery插件autocomplete用法,結(jié)合實(shí)例形式分析了jQuery插件autocomplete與后臺(tái)交互實(shí)現(xiàn)搜索的自動(dòng)完成功能實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-07-07