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 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
vuex入门最详细整理
Mar 04 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中的array数组类型分析说明
2010/07/27 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
javascript折半查找详解
2015/01/26 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python+Django搭建自己的blog网站
2018/03/13 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
大四自我鉴定范文
2013/10/06 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
市场专员岗位职责
2014/02/14 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
用JS写一个发布订阅模式
2021/11/07 Javascript