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模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
纯js简单日历实现代码
Oct 05 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python ATM功能实现代码实例
2020/03/19 Python
python 基于opencv操作摄像头
2020/12/24 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
土建专业大学生自荐信范文
2014/04/09 职场文书
创意婚礼策划方案
2014/05/18 职场文书
办理房产过户的委托书
2014/09/14 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
民事代理词范文
2015/05/25 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python