JQERY limittext 插件0.2版(长内容限制显示)


Posted in Javascript onAugust 27, 2010

增加一个显示更多的功能 附上代码:使用实例在附件

/** 
* demo: 
* 1.$("#limittext").limittext(); 
* 2.$("#limittext").limittext({"limit":1}); 
* 3.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}); 
* 4.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true,"moretext":"更多","lesstext":"隐藏部分","fullfn":function(){alert("more")},"lessfn":function(){alert("less")}}}) 
* 5.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}).limit("all"); 
* @param {Object} opt 
* { 
* limit:30,//显示文字个数 
* fill:'...'//隐藏时候填充的文字 
* morefn:{ 
* status:false,//是否启用更多 
* moretext: "(more)",//隐藏部分文字时候显示的文字 
* lesstext:"(less)",//全部文字时候显示的文字 
* cssclass:"limittextclass",//启用更多的A标签的CSS类名 
* lessfn:function(){},//当文字为更少显示时候回调函数 
* fullfn:function(){}//当文字为更多时候回调函数 
* } 
* @author Lonely 
* @link http://www.liushan.net 
* @version 0.2 
*/ 
jQuery.fn.extend({ 
limittext:function(opt){ 
opt=$.extend({ 
"limit":30, 
"fill":"..." 
},opt); 
opt.morefn=$.extend({ 
"status": false, 
"moretext": "(more)", 
"lesstext":"(less)", 
"cssclass": "limittextclass", 
"lessfn": function(){ 
}, 
"fullfn": function(){ 
} 
},opt.morefn); 
var othis=this; 
var $this=$(othis); 
var body=$this.data('body'); 
if(body==null){ 
body=$this.html(); 
$this.data('body',body); 
} 
var getbuttom=function(showtext){ 
return "<a href='javascript:;' class='" 
+opt.morefn.cssclass+"'>" 
+showtext 
+"<a>"; 
} 
this.limit=function(limit){ 
if(body.length<=limit||limit=='all'){ 
var showbody=body+(opt.morefn.status?getbuttom(opt.morefn.lesstext):""); 
}else{ 
if(!opt.morefn.status){ 
var showbody=body.substring(0,limit) 
+opt.fill; 
}else{ 
var showbody=body.substring(0,limit) 
+opt.fill 
+getbuttom(opt.morefn.moretext); 
} 
} 
$this.html(showbody); 
} 
this.limit(opt.limit); 
$("."+opt.morefn.cssclass).live("click",function(){ 
if($(this).html()==opt.morefn.moretext){ 
showbody=body 
+getbuttom(opt.morefn.lesstext); 
$this.html(showbody); 
opt.morefn.fullfn(); 
}else{ 
othis.limit(opt.limit); 
opt.morefn.lessfn(); 
} 
}); 
return this; 
} 
});

打包下载地址 https://3water.com/jiaoben/29345.html
Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
使用Ajax实现无刷新上传文件
Apr 12 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 #Javascript
jquery 插件开发备注
Aug 27 #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
You might like
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
python实现学生管理系统开发
2020/07/24 Python
Python colormap库的安装和使用详情
2020/10/06 Python
python反扒机制的5种解决方法
2021/02/06 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
结构工程个人自荐信范文
2013/11/30 职场文书
2014年征兵标语
2014/06/20 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
文书工作总结(范文)
2019/07/11 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript