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 相关文章推荐
jQuery Selector选择器小结
May 06 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
vue router 动态路由清除方式
May 25 Vue.js
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
PHP分页显示制作详细讲解
2006/10/09 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
拖动一个HTML元素
2006/12/22 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
大学生学习党课思想汇报
2014/01/03 职场文书
教研活动总结
2014/04/28 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript