[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章を[続きを読む]などであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。
ダウンロードはこちら デモ
スクリプト
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.jtruncate.js" type="text/javascript"></script>
実装
対象の要素にidもしくはclassを指定して、オプションを設定します。
<div id="div627">折りたたみする文章</div>
<script type="text/javascript">
$().ready(function() {
$('#div627').jTruncate({
length: 200, // 表示する文字数
minTrail: 0, // 省略文字の最低文字数
moreText: "more", // 省略部分を表示するリンクの文字
lessText: "hide", // 省略部分を非表示にするリンクの文字
ellipsisText: "...", // 省略部分をあらわす文字
moreAni: "fast", // 折り広げるスピード
lessAni: "fast" // 折り畳むスピード
});
});
</script>
「折り畳む」の反意語って何なんでしょうね~。
オプション
- length:表示文字数 (デフォルト)300
- minTrail:省略文字の最低文字数(省略対象の文字数がこれ以下だったら省略はしませんという数字) (デフォルト)20
- moreText:「さらに」を表すテキスト (デフォルト)"more"
- lessText:「閉じる」を表すテキスト (デフォルト)"less"
- ellipsisText:省略部分を表すテキスト (デフォルト)"..."
- moreAni:開くスピード (デフォルト)なし
jQueryのEffects/show()のspeedの設定 "slow"/"fast"もしくは秒数[ミリ秒] - lessAni:閉じるスピード (デフォルト)なし
jQueryのEffects/hide()のspeedの設定 "slow"/"fast"もしくは秒数[ミリ秒]
日本語では
日本語で必要に迫られたのでためしたところダメ。。と、検索してみたら対処してらっしゃるかたがいました。
jTruncSubstr
プラグインを読み込んで、
$('#div').jTruncate を$('#div').jTruncSubstrに置き換えるだけでよさそうです。
ありがとうございます。
関連記事
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker
- PREV
- Sessionコンポーネント
- NEXT
- Htmlヘルパー






Comment
開くと閉じるを画像で表示するにはどうしたらいいですか?
参考に。ちなみに「折り畳む」の反意語は、「展べ開く」(=のべひらく、展開)かと。
『「折り畳む」の反意語って何なんでしょうね~』>展開とか開くとかじゃね?
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」 http://t.co/88XzoBrpyr
jQuery - [続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」 http://t.co/OBW7buN3Gt
「<%topentry_discription> を応用して」ということにはならない。個人的にはその手のものに興味はないが、http://kwski.net/jquery/627/ のような手法を使えばできるであろう。
文字列に応じてのopen/close 画像には弱い
jQuery: [続きを読む]でテキストを省略、開閉できる「jTruncate」 / jQuery: [続きを読む]でテキストを省略、開閉できる「jTruncate」 | Think deeply, Do less, More … http://htn.to/eVaRLz
jQuery: [続きを読む]でテキストを省略、開閉できる「jTruncate」