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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
node中的密码安全(加密)
Sep 17 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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
咖啡与牛奶
2021/03/03 冲泡冲煮
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Python getopt模块处理命令行选项实例
2014/05/13 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
参观考察邀请函范文
2014/01/29 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
圣诞晚会主持词
2015/07/01 职场文书
教师节班会主持词
2015/07/06 职场文书
教学反思怎么写
2016/02/24 职场文书