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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 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编写的导航条程序
2006/10/09 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
Node.js Express安装与使用教程
2018/05/11 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
python抓取网页中的图片示例
2014/02/28 Python
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python实现结构体代码实例
2020/02/10 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
js实现弹框效果
2021/03/24 Javascript
室内设计专业学生的自我评价分享
2013/11/27 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
会计岗位职责范本
2015/04/02 职场文书
总结几个非常实用的Python库
2021/06/26 Python