[続きを読む]でテキストを省略、開閉できる「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に置き換えるだけでよさそうです。
ありがとうございます。
関連記事
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
- 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」