[続きを読む]でテキストを省略、開閉できる「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に置き換えるだけでよさそうです。
ありがとうございます。
関連記事
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できる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」