jquery 插件開發(fā)備注
更新時間:2010年08月27日 19:30:52 作者:
以前針對DOM元素的插件(即$.fn.)存臨時數(shù)據(jù)都加在當(dāng)前元素上建個特殊的屬性來存,(JQ內(nèi)部直接也搞這樣的)
今天發(fā)現(xiàn)其實(shí)JQ自己早就有對這個臨時數(shù)據(jù)的存儲方法:
$("dom").data(“mydata”,"this is data");還有就是插件開發(fā)的時候我們經(jīng)常要給插件添加方法,其實(shí)就用JS內(nèi)部添加方法的方法即可
this.myfn=function(){}
下面給上一個顯示部分文字的插件的源碼:
(類似CSS的text-overflow,但本插件你需要提供顯示幾個字,用于精確控制顯示數(shù)量)
/**
* 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;
}
});
$("dom").data(“mydata”,"this is data");還有就是插件開發(fā)的時候我們經(jīng)常要給插件添加方法,其實(shí)就用JS內(nèi)部添加方法的方法即可
this.myfn=function(){}
下面給上一個顯示部分文字的插件的源碼:
(類似CSS的text-overflow,但本插件你需要提供顯示幾個字,用于精確控制顯示數(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;
}
});
您可能感興趣的文章:
- 基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)
- Jquery 插件開發(fā)筆記整理
- jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開發(fā)
- 跟我一起學(xué)寫jQuery插件開發(fā)方法(附完整實(shí)例及下載)
- tinyMCE插件開發(fā)之插入html,php,sql,js代碼 并代碼高亮顯示
- jquery 插件開發(fā)方法小結(jié)
- jQuery 插件開發(fā) 其實(shí)很簡單
- fckeditor 插件開發(fā)參考文檔
- FCKeditor 插件開發(fā) 示例(詳細(xì)版本)
- Eclipse插件開發(fā)之新手入門
- jquery插件開發(fā)方法(初學(xué)者)
相關(guān)文章
基于jquery的用dl模擬實(shí)現(xiàn)可自定義樣式的SELECT下拉列表(已封裝)
通過dl模擬實(shí)現(xiàn)SELECT下拉列表. 其實(shí)這是項目中要常用到的一個效果, 于是, 在之前寫的基礎(chǔ)上封裝成了一個插件. 可自定義樣式, 可防止用戶本意劃過時觸發(fā)事件.2010-11-11基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析
這篇文章主要介紹了基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見
這篇文章主要介紹了使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見2016-02-02jquery簡單實(shí)現(xiàn)鼠標(biāo)經(jīng)過導(dǎo)航條改變背景圖
鼠標(biāo)經(jīng)過導(dǎo)航條改變背景圖的效果很是好看,下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-12-12淺談jquery采用attr修改form表單enctype不起作用的問題
下面小編就為大家?guī)硪黄獪\談jquery采用attr修改form表單enctype不起作用的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jQuery用noConflict代替$的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query用noConflict代替$的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04