JQERY limittext 插件0.2版(长内容限制显示)

增加一个显示更多的功能 附上代码:使用实例在附件


代码如下:

/**
* 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;
}
});

打包下载地址 http://www.jb51.net/jiaoben/29345.html

(0)

相关推荐

  • JQERY limittext 插件0.2版(长内容限制显示)

    增加一个显示更多的功能 附上代码:使用实例在附件 复制代码 代码如下: /** * demo: * 1.$("#limittext").limittext(); * 2.$("#limittext").limittext({"limit":1}); * 3.$("#limittext").limittext({"limit":1,"fill":"......",&qu

  • Vue element-ui中表格过长内容隐藏显示的实现方式

    目录 一.el-table表格 二.Popover 弹出框 总结 一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看. 为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且

  • MySQL8.0.21.0社区版安装教程(图文详解)

    一.下载MySQL 登录MySQL官网下载MSI Installer: 点击"Dnownload" 点击"No thanks, just start my download." 二.安装MySQL Step1:选择安装类型 根据个人需求,选择其中一个安装类型: Developer Default 开发者默认安装 Server only 仅安装服务端(推荐) Client only 仅安装客户端 Full 安装所有内容 Custom 自定义安装(推荐) 点击"

  • jQueryMobile之窗体长内容的缺陷与解决方法实例分析

    本文实例讲述了jQueryMobile窗体长内容的缺陷与解决方法.分享给大家供大家参考,具体如下: 前面的一篇文章<jQueryMobile之Helloworld与页面切换的方法>没有考虑到窗体中放置长内容的状况 一旦窗体中出现长内容,使用笔者那种固定header与footer的全屏布局是存在缺陷的, 如图所示,长内容最后的内容,直到滚动条拉到最底部也无法穷尽, 而且很有可能的是,虽然现在这个地方的内容是显示为半透明,但往往这个位置是一些提交按钮什么的, 用户根本就没法点, 因此,需要进行改进

  • Docker v1.13.0 正式版发布

    Docker v1.13.0 正式版发布了. 重要信息:在 Docker 1.13 中,与在 Docker 1.12 中引入的实验版本相比,管理插件 api 发生了变化.在升级到 Docker 1.13 之前,必须卸载使用 Docker 1.12 安装的插件.可通过  docker plugin rm 命令卸载插件. 如果已经升级到 Docker 1.13 而不卸载先前安装的插件,则当 Docker 守护程序启动时,可能会看到此消息 Error starting daemon: json: ca

  • 360安全卫士 3.0 正式版下载

    360安全卫士是一款安全类上网辅助软件,它拥有查杀恶意软件,插件管理,病毒查杀,诊断及修复四大强劲功能,同时还提供弹出插件免疫,清理使用痕迹以及系统还原等特定辅助功能.360安全卫士适用于windows2k/xp系统,IE5.0以上浏览器.360安全卫士是由奇虎网推出的一款全免费产品.2007-1-31 360安全卫士v3.0正式版发布·主动防御阻止恶意程序安装,保护系统关键位置拦截恶意钓鱼网站,防止帐号.QQ号.密码丢失·超强查杀"破冰"技术,独家清除cnnic中文上网等顽固型恶意软

  • 使用.net core3.0 正式版创建Winform程序的方法(图文)

    前阵子一直期待.net core3.0正式版本的出来,以为这个版本出来,Winform程序又迎来一次新生了,不过9.23日出来的马上下载更新VS,创建新的.net core Winform项目,发现并没有Winform窗体设计器.而微软目前则是通过插件的方式,让我们单独下载Winform设计器,这个设计器还是预览版本,很多功能还是没有实现的,只能算是一个简单的雏形,本博客案例介绍基于.net core3.0创建一个普通的WInform程序,让大家了解下基于.net core3.0创建的程序的大概

  • idea热部署插件jrebel正式版及破解版安装详细图文教程

    正式版: 版本最新但只有14天的体验时间, 之后需要激活,激活注册已经不行了,现在需要使用新的方式: 首先下载反向代理工具,下载地址: 根据系统选择工具版本地址为: https://github.com/ilanyu/ReverseProxy/releases/tag/v1.4 Windows64位版本下载地址: https://github.com/ilanyu/ReverseProxy/releases/download/v1.4/ReverseProxy_windows_amd64.exe

  • SpringCloud升级2020.0.x版之OpenFeign简介与使用实现思路

    目录 OpenFeign 的由来和实现思路 OpenFeign 简介 OpenFeign 基本使用 本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent OpenFeign 的由来和实现思路 在微服务系统中,我们经常会进行 RPC 调用.在 Spring Cloud 体系中,RPC 调用一般就是 HTTP 协议的调用.对于每次调用,基本都要经过如下步骤: 找到微服务实例列表并选择一个实例 调用参数序列化 使用 Http 客户端将请求发送出去

  • Mysql 8.0 绿色版安装教程详解

    Mysql 8.0 绿色版安装教程,供大家参考,具体内容如下 1.进入官网找到自己所需的安装包:MySQL :: Developer Zone 下载地址:MySQL Community Server 8.0.29 官方免费安装版 软件路径:DOWNLOAD–>MYSQL Community Downloads–>MYSQL on Windows 2.解压zip压缩包至想要安装的目录,比如解压到D:\mysql\mysql-8.0.29-winx64 3.在解压目录D:\mysql-8.0.29

随机推荐