大家都知道，很多网站都有那种把较长文本收缩起来，只显示一小部分，后面有个展开/收缩按钮，点击可切换全部显示和只显示一小部分状态。
将要实现效果如下：
说句实话，这是一个简单得不能再简单的东西了，我也用Js实现功能（写死在每个页面），可我有十多个页面要用到这东西，就想着把它封装成插件，可我又从来没写过Js插件，项目要得很紧，也没时间去研究，所有就在百度上找看看有没有现成的。
结果找了好多都不是这种效果，到最后好不容易找了一个呢，是国外的，效果也能实现，不过有点小瑕疵。
1.因为作者是老外，所以分割文字时他是在指定的切割位置向后搜索，直到空格时才分割。因为英文单词是不能分割的，而单词间是以空格来区分的。这个用于中文的话就有问题，比如上图那个的文本，没一个空格的。
2.每展开并收缩一次，就会产生一个空的连接标签，虽然界面上看不到，但总觉得不爽。
3.那老外把收缩时的的标志省略号“...”写在展开连接里面的，不像上图是在文本尾部，这样就只能把连接和文本紧挨着，不然就很明显的看到省略号是在连接内。
因为又找不到其他的，一看那个JQuery插件代码也不是太多，所以就试着改一下。
好了，废话少说，直接贴代码。一个是未修改的源插件代码，一个是我改过的代码。
源插件代码（我只是格式化了），文件名：jquery.truncatable.js
View Code
1 (function($) {
2 $.fn.truncatable = function(options) {
3 var defaults = {
4 limit: 100,
5 more: '...',
6 less: false,
7 hideText: '[read less]'
8 };
9 var options = $.extend(defaults, options);
10 return this.each(function(num) {
11 var stringLength = $(this).html().length;
12 if (stringLength > defaults.limit) {
13 var splitText = $(this).html().substr(defaults.limit);
14 var splitPoint = splitText.substr(0, 1);
15 var whiteSpace = new RegExp(/^\s+$/);
16 for (var newLimit = defaults.limit; newLimit < stringLength; newLimit++) {
17 var newSplitText = $(this).html().substr(0, newLimit);
18 var newHiddenText = $(this).html().substr(newLimit);
19 var newSplitPoint = newSplitText.slice( - 1);
20 if (whiteSpace.test(newSplitPoint)) {
21 var hiddenText = '<span class="hiddenText_' + num + '" style="display:none">' + newHiddenText + '</span>';
22 var setNewLimit = (newLimit - 1);
23 var trunkLink = $('<a>').attr('class', 'more_' + num + '');
24 $(this).html($(this).html().substr(0, setNewLimit)).append('<a class="more_' + num + '" href="#">' + defaults.more + '<a/> ' + hiddenText);
25 $('a.more_' + num).bind('click',
26 function() {
27 $('span.hiddenText_' + num).show();
28 $('a.more_' + num).hide();
29 if (defaults.less == true) {
30 $('span.hiddenText_' + num).append('<a class="hide_' + num + '" href="" title="' + defaults.hideText + '">' + defaults.hideText + '</a>');
31 $('a.hide_' + num).bind('click',
32 function() {
33 $('.hiddenText_' + num).hide();
34 $('.more_' + num).show();
35 $('.hide_' + num).empty();
36 return false
37 })
38 }
39 });
40 newLimit = stringLength
41 }
42 }
43 }
44 })
45 }
46 })(jQuery);
下面是我修改的：
View Code
1 (function ($) {
2 $.fn.truncaString = function (options) {
3 var defaults = {
4 length: 100,
5 isHide: false, //初始时是否收缩
6 hideClue: false, //是否显示收缩提示符 “...”
7 moreText: '[Expansion]', //展开按纽文本
8 hideText: '[Shrink]', //收缩按纽文本
9 moreTitle: '', //展开按纽标题（鼠标移上时提示文字）
10 hideTitle: '', //收缩按纽标题（鼠标移上时提示文字）
11 boundary: /^\s+$/ //匹配分割符的正则表达式，匹配空格，因为英文单词不能从中间断开 /^(\s|\u002c|\u002e|\uff0c|\u3002|[\u4E00-\u9FA5])+$/
12 };
13 var options = $.extend(defaults, options);
14 return this.each(function (num) {
15 var stringLength = $(this).html().length;
16 if (stringLength > defaults.length) {
17 var whiteSpace = new RegExp(defaults.boundary);
18 var moreHtml = '<a class="more_' + num + '" href="#" title="' + defaults.moreTitle + '">' + defaults.moreText + '</a> ';//“展开”按纽
19 var hideHtml = '<a class="hide_' + num + '" href="#" title="' + defaults.hideTitle + '">' + defaults.hideText + '</a>';//“收缩”按纽
20
21 //循环把分割点向后移动，直到找到空格
22 for (var newLimit = defaults.length; newLimit < stringLength; newLimit++) {
23 var newSplitText = $(this).html().substr(0, newLimit); //分割点前的字符（一直要显示的）
24 var newHiddenText = $(this).html().substr(newLimit); //分割点后的字符（要隐藏的）
25 var newSplitPoint = newSplitText.slice(-1); //拷贝分割点前的字符
26 if (whiteSpace.test(newSplitPoint)) { //结尾是否匹配分割字符
27 var clue = defaults.hideClue ? '<span class="hideClue_' + num + '">...</span>' : '<span class="hideClue_' + num + '"></span>';
28 var hiddenText = '<span class="hiddenText_' + num + '">' + newHiddenText + '</span>'; //要隐藏的部分
29 var displayText = $(this).html().substr(0, newLimit - 1); //要显示的部分
30 $(this).html(displayText).append(clue + hiddenText + moreHtml + hideHtml);
31
32 $('a.more_' + num).bind('click', function () { //展开
33 $('span.hiddenText_' + num).show();
34 $('span.hideClue_' + num).hide();
35 $('a.more_' + num).hide();
36 $('a.hide_' + num).show();
37 return false;
38 });
39 $('a.hide_' + num).bind('click', function () { //隐藏
40 $('span.hiddenText_' + num).hide();
41 $('span.hideClue_' + num).show();
42 $('a.more_' + num).show();
43 $('a.hide_' + num).hide();
44 return false;
45 });
46
47 if (defaults.isHide) {
48 $('a.hide_' + num).click();
49 } else {
50 $('a.more_' + num).click();
51 }
52
53 newLimit = stringLength;
54 }
55 }
56 }
57 })
58 }
59 })(jQuery);调用
$(function () {
$('#articleIntroStr').truncaString({
length: 150,
hideClue: true,
isHide: true,
moreText:"更多",
hideText:"收缩",
boundary: /^(\s|\u002c|\u002e|[\u4E00-\u9FA5])+$/
});
});
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
