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,超强推荐base.js
Dec 23 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 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中的unset究竟会不会释放内存
2013/07/18 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
jquery validate demo 基础
2015/10/29 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Python正则表达式匹配HTML页面编码
2015/04/08 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python+opencv实现阈值分割
2018/12/26 Python
python write无法写入文件的解决方法
2019/01/23 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
师范生教师实习自我鉴定
2013/09/27 职场文书
现场施工员岗位职责
2014/03/10 职场文书
师德师风自查总结
2014/10/14 职场文书
简历中自我评价范文
2015/03/11 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript