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

 更新时间:2010年08月27日 20:10:17   作者:  
JQERY limittext 插件为长内容增加一个显示更多的功能
增加一个显示更多的功能 附上代码:使用实例在附件
复制代码 代码如下:

/**
* 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://www.jb51.net/jiaoben/29345.html

相关文章

  • jQuery对表单元素的取值和赋值操作代码

    jQuery对表单元素的取值和赋值操作代码

    使用常规的思路:$(“#keyword”).value 取值是取不到的,因为此时$(‘#keydord’)已经不是个element,而是个jquery对象,所以应该使用:$(“#keyword”).val()
    2011-05-05
  • jQuery 学习第七课 扩展jQuery的功能 插件开发

    jQuery 学习第七课 扩展jQuery的功能 插件开发

    在介绍如何扩展jQuery之前,先大致看下jQuery源码(以1.3.2版本为例)。
    2010-05-05
  • 基于JQuery实现CheckBox全选全不选

    基于JQuery实现CheckBox全选全不选

    做项目时需要实现CheckBox的全选,我想用JQuery实现,从网上找了找,网上的确有很多例子,但都不能实现我想要的全部效果
    2011-06-06
  • jquery弹出框的用法示例(一)

    jquery弹出框的用法示例(一)

    最近做一个项目,许多功能都是关于弹出框的,在做的过程中发现会有好多自己考虑不到的问题,下面以一个示例为大家详细介绍下,感兴趣的朋友可以参考下
    2013-08-08
  • 很酷的60款jQuery 幻灯片演示和下载

    很酷的60款jQuery 幻灯片演示和下载

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展示系列项目时非常好的方法
    2012-05-05
  • 自己动手实现jQuery Callbacks完整功能代码详解

    自己动手实现jQuery Callbacks完整功能代码详解

    最近大量的用到jQuery Callbacks 对象,jQuery库中的$.ajax()和$.Deferred() 对象也是基于这个对象实现,下面我们也模拟实现jQuery Callbacks 对象的部分功能
    2013-11-11
  • jQuery实现鼠标经过显示动画边框特效

    jQuery实现鼠标经过显示动画边框特效

    本文主要介绍了jQuery鼠标经过显示动画边框特效的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • jquery实现左右滑动菜单效果代码

    jquery实现左右滑动菜单效果代码

    这篇文章主要介绍了jquery实现左右滑动菜单效果代码,涉及jquery鼠标事件及页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • Tab页界面 用jQuery及Ajax技术实现(php后台)

    Tab页界面 用jQuery及Ajax技术实现(php后台)

    到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式
    2011-10-10
  • jQuery+ajax实现修改密码验证功能实例详解

    jQuery+ajax实现修改密码验证功能实例详解

    本文通过实例代码给大家介绍了jQuery+ajax实现修改密码验证功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-07-07

最新评论