今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」
  2. 入力に応じてテキストエリアの高さを調節「Autosize」
  3. テキスト・画像・iframeなどに対応したLightbox「Featherlight」

指定した文字数でテキストを省略・開閉 - 続きを読む「Collapser」

スポンサーリンク

指定した文字数でテキストを省略・開閉する「続きを読む」を実装するプラグイン「Collapser」を紹介します。

jQueryプラグイン「funText」

このプラグインを使えば、指定した「文字数」「ワード数」「行数」でテキストを省略することができます。

しかも、省略したテキストを読むための「続きを読む」ボタンで開閉といった機能も実装することができます。

  • モード「文字数(chars)」「ワード数(words)」「行数(lines)」
  • 開閉のスピード
  • 省略する文字数
  • 「続きを読む」のテキスト
  • ……など
スポンサーリンク

それではデモページのテキストをご覧ください。

「Collapser」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Collapserのデモでーす。">
<title>Collapser - jQueryプラグイン</title>
</head>
<h1>Collapser のデモでーす。</h1>
<p class="demo">ゆうていみやおうきむこうほりいゆうじとりやまあきらぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺぺ</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.collapser.js"></script>
<script>
$(document).ready(function(){
  $('.demo').collapser({
    mode: 'chars',
    truncate: 10,
    showText: 'つづきをよむ',
    hideText: 'かくす'
  });
});
</script>
</html>
スポンサーリンク

関連記事(一部広告含む)