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 相关文章推荐
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
Java无向树分析 实现最小高度树
Apr 09 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图像处理类代码分享
2012/01/19 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP安全下载文件的方法
2016/04/07 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
js计算精度问题小结
2013/04/22 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python网络编程实例简析
2014/09/26 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
项目资料员岗位职责
2013/12/10 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
2014财务年度工作总结
2014/11/11 职场文书
捐款仪式主持词
2015/07/04 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
七年级作文之环保作文
2019/10/17 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书