文章が長くなってしまったときなど、「続きを読む」などで文章を省略させて途中まで表示させたい場合があります。

その「続きを読む」が簡単に実装できて、リンクをクリックすると、残りの文章がアコーディオン式に表示されたり、非表示にしたりの動作を簡単に実装することができるのが、このjQueryプラグイン『jTruncSubstr』。

このjQueryプラグインは、『jTruncate』というjQueryプラグインをもとに日本語でもスムーズに使えるようにしてあります。ちなみに『jTruncate』は日本語ではダメ・・。

その動作はサンプルを見て頂いた方が早いと思います。

⇒ アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』

使い方は続きをご覧下さい。

使い方

まずは、次のサイトからプラグインをダウンロードしてきます。
http://semooh.jp/jglycy/jquery-plugins/jtruncsubstr

<head>部分にJavaScriptを指定します。

<body>部分に指定したID名でテキスト要素を設置します。

オプションで動きを制御することができます。(本家のサイトから引用)

length
表示部分にあたる文字列の長さを指定します。

デフォルトは300です。

minTrail
非表示部分にあたる文字列長の最小の長さを指定します。
Truncate処理を行った結果、非表示部分がこの値以下のサイズしかないようなら、Truncate処理を行いません。

デフォルトは20です。

moreText
非表示部分を表示するリンクの文字列です。

デフォルトは “more” です。

lessText
表示した後、再び非表示にするリンクの文字列です。

デフォルトは “less” です。

ellipsisText
続きがあることを表示するための文字列です。

デフォルトは ”…” です。

moreAni
表示時にアニメーションさせる場合、その速度を設定します。
この値をゼロにすると、アニメーションが起きずに即座に表示されます。

デフォルトは 500 です。

lessAni
非表示時にアニメーションさせる場合、その速度を設定します。
この値をゼロにすると、アニメーションが起きずに即座に非表示になります。

デフォルトは 500 です。

delimiters
区切り文字を設定します。
この値が空文字の場合、substrモードになります。
値を設定する場合は、配列で区切り文字の候補を設定します。

デフォルトは ”” です。

プラグインを読み込ませて、指定したID名の要素でテキストを書くだけで、指定した文字数で「続きを読む」が設定できます。

スマホやタブレットでも活躍する場面が多そうですね。最後にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: