[続きを読む]でテキストを省略、開閉できる「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に置き換えるだけでよさそうです。
ありがとうございます。

Readmore.js 高さ指定
  • このエントリーをはてなブックマークに追加

関連記事

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

カルーセル プラグイン

「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り

no image

スワイプ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

Comment

ねこ にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑