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写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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 特殊字符处理函数
2008/09/05 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
有关Python的22个编程技巧
2018/08/29 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python pycharm的安装及其使用
2019/10/11 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
实验教师岗位职责
2014/02/13 职场文书
保护环境倡议书
2014/04/14 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
我的1919观后感
2015/06/03 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电