[続きを読む]でテキストを省略、開閉できる「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 高さ指定
  • このエントリーをはてなブックマークに追加

関連記事

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

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

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

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

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

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

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

no image

グラフ作成 プラグイン

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

Comment

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

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

*

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

PAGE TOP ↑