まだデータがありません。
指定した文字数でテキストを省略・開閉 - 続きを読む「Collapser」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した文字数でテキストを省略・開閉する「続きを読む」を実装するプラグイン「Collapser」を紹介します。
jQueryプラグイン「funText」
このプラグインを使えば、指定した「文字数」「ワード数」「行数」でテキストを省略することができます。
しかも、省略したテキストを読むための「続きを読む」ボタンで開閉といった機能も実装することができます。
- モード「文字数（chars）」「ワード数（words）」「行数（lines）」
- 開閉のスピード
- 省略する文字数
- 「続きを読む」のテキスト
- ……など
スポンサーリンク
それではデモページのテキストをご覧ください。
ソース（ 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>
スポンサーリンク