[続きを読む]でテキストを省略、開閉できる「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に置き換えるだけでよさそうです。
ありがとうございます。
関連記事
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
- 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」