「…続きを読む」で文章を省略させるプラグイン[ jTruncSubstr ]
スマートフォンサイトなどを作る上でも役に立つのではないかなと思います。
「…続きを読む」で文章を省略させるプラグイン [ jTruncSubstr ]
文章を省略させるプラグインはいくつかあるようですが、そのなかでも使いやすかったjTruncSubstrを紹介します。
「jTruncSubstr」
jTruncateがベースのプラグインのようです。
jTruncate：http://plugins.jquery.com/project/jTruncate
なにが使いやすいかというと、
jTruncateは日本語のテキストにはあまり向かない作りだったのですが、日本語向けに使うことができるよう、改良されたものになっているようです。
また、オプションもカスタマイズすることができ、その時にあった表示や動きを指定できます。
また、このプラグインはjGlycyというjQueryのプラグインのようなもの(詳しくはこちら)を使います。
使うもの
jGlycy：http://semooh.jp/jglycy/
jTruncSubstr（jGlycyのサイト内にある）：http://semooh.jp/jglycy/jquery-plugins/jtruncsubstr ?
使い方
jQueryとjGlycy、jGlycyのサイト内にあるjTruncSubstrを読み込む
そして、省略したいテキストが入っているボックスに直接指示を書きます。
=html= <p jg="jTruncSubstr" jg:jTruncSubstr="length:30,moreText:'続きを読む',lessText:'閉じる'"> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト<br /> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト<br /> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト<br /> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト<br /> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト<br /> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト </p>
jg=”jTruncSubstr” jg:jTruncSubstr=”length:30,moreText:’続きを読む’,lessText:’閉じる'”
↑この部分に指示が書いてあります。
jg=”jTruncSubstr” → jGlycyのjTruncSubstrをつかいます。
jg:jTruncSubstr=”” → jGlycyのjTruncSubstrを使う際の設定をします。”(設定内容)”
length:30 → 表示する文字列の長さ。
moreText:’続きを読む’ → 「続きを読む」などの、非表示文字を表示させる際のリンクの文字列。
lessText:’閉じる’ → 全テキストを表示した際現れる、再びテキストを非表示にさせるリンクの文字列。
このような設定で、[サンプル]のようなものができます。
この他にもオプション設定はいくつかでき、
minTrail [非表示部分にあたる文字列長の最小の長さを指定]
ellipsisText [続きがあることを表示するための文字列。今回は”…”]
moreAni [表示時にアニメーションさせる場合、その速度を設定。]
lessAni [非表示時にアニメーションさせる場合、その速度を設定。]
delimiters [区切り文字を設定します。]
などの種類があります。
詳しいオプション設定はhttp://semooh.jp/jglycy/tutorialにあります。
このように気軽に使えるので、試してみてください！
