Readmore.js – 控制长文本开关的jQuery插件

me87re 9年前

Readmore.js是一个轻量级的jQury插件用于实现长文本块的可展开和关闭，通过点击 “Read more” 和 “Close” 链接实现。

Install

Install Readmore.js with Bower:

$ bower install readmore

Then include it in your HTML:

<script src="/bower_components/readmore/readmore.min.js"></script>

Use

$('article').readmore();

It's that simple. You can change the speed of the animation, the height of the collapsed block, and the open and close elements.

$('article').readmore({    speed: 75,    lessLink: '<a href="#">Read less</a>' });

The options:

  • speed: 100 in milliseconds
  • collapsedHeight: 200 in pixels
  • heightMargin: 16 in pixels, avoids collapsing blocks that are only slightly larger than collapsedHeight
  • moreLink: '<a href="#">Read more</a>'
  • lessLink: '<a href="#">Close</a>'
  • embedCSS: true insert required CSS dynamically, set this to false if you include the necessary CSS in a stylesheet
  • blockCSS: 'display: block; width: 100%;' sets the styling of the blocks, ignored if embedCSS is false
  • startOpen: false do not immediately truncate, start in the fully opened position
  • beforeToggle: function() {} called after a more or less link is clicked, but before the block is collapsed or expanded
  • afterToggle: function() {} called after the block is collapsed or expanded

If the element has a max-height CSS property, Readmore.js will use that value rather than the value of the collapsedHeight option.

The callbacks:

The callback functions, beforeToggle and afterToggle, both receive the same arguments: trigger, element, and expanded.

  • trigger: the "Read more" or "Close" element that was clicked
  • element: the block that is being collapsed or expanded
  • expanded: Boolean; true means the block is expanded

Callback example:

Here's an example of how you could use the afterToggle callback to scroll back to the top of a block when the "Close" link is clicked.

$('article').readmore({    afterToggle: function(trigger, element, expanded) {      if(! expanded) { // The "Close" link was clicked              $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );      }    }  });

Removing Readmore:

You can remove the Readmore.js functionality like so:

$('article').readmore('destroy');

Or, you can be more surgical by specifying a particular element:

$('article:first').readmore('destroy');

Toggling blocks programmatically:

You can toggle a block from code:

$('article:nth-of-type(3)').readmore('toggle');

CSS:

Readmore.js is designed to use CSS for as much functionality as possible: collapsed height can be set in CSS with the max-height property; "collapsing" is achieved by setting overflow: hidden on the containing block and changing the height property; and, finally, the expanding/collapsing animation is done with CSS3 transitions.

By default, Readmore.js inserts the following CSS, in addition to some transition-related rules:

selector + [data-readmore-toggle], selector[data-readmore] {    display: block;    width: 100%;  }

selector would be the element you invoked readmore() on, e.g.: $('selector').readmore()

You can override the base rules when you set up Readmore.js like so:

$('article').readmore({blockCSS: 'display: inline-block; width: 50%;'});

If you want to include the necessary styling in your site's stylesheet, you can disable the dynamic embedding by setting embedCSS to false:

$('article').readmore({embedCSS: false});

Media queries and other CSS tricks:

If you wanted to set a maxHeight based on lines, you could do so in CSS with something like:

body {    font: 16px/1.5 sans-serif;  }/* Show only 4 lines in smaller screens */ article {    max-height: 6em; /* (4 * 1.5 = 6) */ }

Then, with a media query you could change the number of lines shown, like so:

/* Show 8 lines on larger screens */ @media screen and (min-width: 640px) {    article {      max-height: 12em;    }

}

项目主页：http://www.open-open.com/lib/view/home/1430731176351