ボックスの高さを指定して「続きを読む」リンクを付けられる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

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services