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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
javascript self对象使用详解
Oct 18 Javascript
VueJS全面解析
Nov 10 Javascript
JS常见算法详解
Feb 28 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 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
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
phpStorm2020 注册码
2020/09/17 PHP
网页常用特效代码整理
2006/06/23 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python实现调度算法代码详解
2017/12/01 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
高中自我鉴定
2013/12/20 职场文书
招聘专员岗位职责
2014/03/07 职场文书
《雪儿》教学反思
2014/04/17 职场文书
公司年会策划方案
2014/05/17 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
数据设计之权限的实现
2022/08/05 MySQL