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 相关文章推荐
jQuery function的正确书写方法
Aug 02 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
JS中substring与substr的用法
Nov 16 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
vue axios整合使用全攻略
May 24 Javascript
javascript中的with语句学习笔记及用法
Feb 17 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
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
详解javascript高级定时器
2015/12/31 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
AngularJS入门之动画
2016/07/27 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
JS常用知识点整理
2017/01/21 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
Python函数学习笔记
2008/10/07 Python
Python字符串中查找子串小技巧
2015/04/10 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
清洁工表扬信
2014/01/08 职场文书
计算机专业自荐信
2014/05/24 职场文书
报到证办理个人委托书
2014/10/06 职场文书
年会邀请函范文
2015/01/30 职场文书
立春观后感
2015/06/18 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书