基于jQuery的ellipsis插件

话说,多行文本末尾出现省略号的问题,一直都没有兼容性好的方法可以解决这个问题,虽然有些浏览器可以通过一些特定的CSS进行简单的实现这个功能,但是放到浏览器兼容问题上,就不再可靠了。

写在前面

在网络上,也有很多文章,是实现文本溢出功能的,甚至也有一些比较出名的插件,比如:dotdotdotClamp.js,这里关于它们的实现什么的,也就不多说。

我的ellipsis插件

应该是因为闲来无事吧,把之前一直受到困扰的这个小功能给实现成一个小的插件,说小也只能说功能小,写的代码感觉也不少的样子,有200行呢,而且是基于jQuery的,如果是原生的,再添加上各种兼容性的代码,估计代码量翻倍都不止吧。

我所需要的插件,就需要完成两个功能:
1:隐藏多余文字,结尾以省略号结束。
2:展开和隐藏功能

OK,接下来就看下代码的使用吧,该插件是基于构造函数模式实现的,所以可以通过实例化实现:


new Ellipsis(obj,options);


其中,obj为标签元素,obj内部的文字,会按照要求进行处理,最后在末尾添加省略号。

注:obj内部的标签元素,不支持同类标签嵌套,比如:

	
<a>dsa<span>asd</span></a>
//该类标签会被正确区分

<span>dsa<span>asd</span></span>
//同类标签嵌套,会出问题的。
//会导致最后输出的文字,出现差错。

word://显示文字的个数,如果有值,按该值处理,默认为0
line://显示的行数,如果word为0时,按该值处理,默认为1
more:'<a href = "#" data-show = "展开↓" data-hide = "收起↑">展开↓</a>'
//more按钮的样式,
//为空,则不添加该按钮
//如果不输入该值,则按照默认添加
//如果href有值,则为一个超链接,无值则为一个当前展开关闭的JS操作
//data-show的值,在省略号时显示,data-hide为,全部显示时显示。

看完上面的,就可以很简单的看下操作了,因为既然是基于jQuery实现的,所以就直接把方法添加到了jQuery的静态方法和实例中去了,在接下来,会把两种调用相对比的使用:

使用方法:

CSS样式

	
.ellipsis-demo{width:200px;border:1px solid #ccc;}

	

HTML结构

	
<div class = "ellipsis-demo">
	adsf啥时打123-124,<a>123<span>1321</span></a>aad_a的a-d,a12就adsf啥时打123-124,aad_a的a-d,a12adsf啥adsf啥时打123-124,aad_a的a-d,a12就adsf啥时打123-124,aad_a的a-d,a12adsf啥
</div>

	

JS执行

	
$("#test1").ellipsis();
//new Ellipsis($("#test1"));

$("#test2").ellipsis({word:20});
//new Ellipsis($("#test2"),{word:20});

$("#test3").ellipsis({line:3});
//new Ellipsis($("#test3"),{line:3});

$("#test4").ellipsis({line:3,more:""});
//new Ellipsis($("#test4"),{line:3,more:""});

$("#test5").ellipsis({
    line:3,
    more:'<a href = "http://www.zhangyunling.com" target = "_blank">查看更多</a>'
});
//new Ellipsis($("#test5"),{
//  line:3,
//  more:'<a href = "http://www.zhangyunling.com" target = "_blank">查看更多</a>'
//});

$("#test6").ellipsis({
    line:3,
    more:'<a href = "#" data-show="查看详情" data-hide = "关闭">查看详情</a>'
});
//new Ellipsis($("#test6"),{
//  line:3,
//  more:'<a href = "#" data-show="查看详情" data-hide = "关闭">查看详情</a>'
//});

	

代码看起来,总归是太抽象了,所以,可以直接查看对应的demo:ellipsis插件demo

OK,很简单的插件了,所以,这里也没有太多可说的了。
其实这个方法,我个人觉得不是个好的方法,有些得不偿失的感觉,因为要进行很多计算,这肯定就会降低了页面加载的速度,我自己有测试一下,平均每一次计算,差不多要30ms的样子,所以,如果有30+的模块需要使用到了这个插件,那么就要多了1秒中的加载时间,其实很扯的,所以,还是不推荐使用了。只当做是学习就好了。

而且,如果真的需要使用多出的使用省略号,那么还是单行显示吧,或者固定字数显示吧,这样就会有更好的性能了。

OK,2015年第一篇,搞了一篇自己都觉得是废材的插件,汗~~~

本文地址:http://www.zhangyunling.com/?p=279

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>