[続きを読む]でテキストを省略、開閉できる「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に置き換えるだけでよさそうです。
ありがとうございます。
関連記事
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれる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」