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变量作用域及可访问性的探讨
Nov 23 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
angular分页指令操作
Jan 09 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
JavaScript 闭包的使用场景
Sep 17 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
3种平台下安装php4经验点滴
2006/10/09 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
php多线程并发实现方法
2016/09/30 PHP
Laravel日志用法详解
2016/10/09 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
js自定义事件代码说明
2011/01/31 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
django rest framework之请求与响应(详解)
2017/11/06 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python通过zabbix api获取主机
2018/09/17 Python
对python中dict和json的区别详解
2018/12/18 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
行政监察建议书
2014/05/19 职场文书
2014年个人委托书范本
2014/10/13 职场文书
放假通知格式
2015/04/14 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
Flask response响应的具体使用
2021/07/15 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python