jquery 插件开发备注


Posted in Javascript onAugust 27, 2010

今天发现其实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; 
} 
});
Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
javascript闭包的理解
Apr 01 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 #Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 #Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 #Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 #Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 #Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 #Javascript
js中判断控件是否存在
Aug 25 #Javascript
You might like
smarty内置函数section的用法
2015/01/22 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
基于Bootstrap表单验证功能
2017/11/17 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
python分割和拼接字符串
2013/11/01 Python
Python命名空间详解
2014/08/18 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python集合是否可变总结
2019/06/20 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
异步传递消息系统的作用
2016/05/01 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
公司授权委托书范本
2014/09/18 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers