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防止用户多次提交的简单代码
Aug 01 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
node版本管理工具n包使用教程详解
Nov 09 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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删除HTMl标签的三种解决方法
2013/06/30 PHP
php英文单词统计器
2016/06/23 PHP
laravel请求参数校验方法
2019/10/10 PHP
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
深入解析nodejs HTTP服务
2017/07/25 NodeJs
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Python中的super()方法使用简介
2015/08/14 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python判断完全平方数的方法
2018/11/13 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
周鸿祎:教你写创业计划书
2013/12/30 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
电影圆明园观后感
2015/06/03 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL