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 相关文章推荐
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
python调用shell的方法
2013/11/20 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Python中过滤字符串列表的方法
2020/12/22 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
2014政务公开实施方案
2014/02/19 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js