ボックスの高さを指定して「続きを読む」リンクを付けられるjQueryプラグイン・READMORE.JS

ちょっと便利そうだったので備忘録。テキストが長いコンテンツをコンパクト化するスクリプトです。方法はいろいろありますけど、こちらは高さ指定という点がシンプルで良かったです。

「続きを読む」リンクを挿入できる、というもの。先発スクリプトは文字数の指定が殆どですが、こちらはボックスの高さを指定するタイプになります。

動作サンプル

続きを読む、のリンクが加わっていますが、特に要素を追加する必要が無いので既存コンテンツに導入しやすそう。

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="readmore.min.js"></script>

本体とプラグインを読み込みます。

$('article').readmore({
      maxHeight: 110
});

あとは挿入したいボックスに、高さを指定すれば、その高さより下は続きを読むリンクでスライド表示されるようになります。

$('article').readmore({
speed: 100,
maxHeight: 200,
moreLink: '<a href="#">続きを読む</a>',
lessLink: '<a href="#">閉じる</a>',
});

スライドのスピードやテキストも変更可能です。

途中に画像等がある場合は切れて表示されます。シンプルに、指定された高さからは続きを読むリンクが挿入される、というもののようですね。ライセンスはMITです。

READMORE.JS