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

関連記事

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

no image

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

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

no image

色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

no image

グラフ作成 プラグイン

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

no image

グリッドレイアウト プラグイン

Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb

画像ズーム プラグイン

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

Comment

Message

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

*

PAGE TOP ↑