jQuery实现长文本收缩展开插件

大家都知道，很多网站都有那种把较长文本收缩起来，只显示一小部分，后面有个展开/收缩按钮，点击可切换全部显示和只显示一小部分状态。

将要实现效果如下：

    

说句实话，这是一个简单得不能再简单的东西了，我也用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])+$/

                    });

                    });

                });