Shorten

JavaScript

長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれるjQueryプラグインです。いわゆるmoreタグを生成させることができます。リンクになっているのでこれをクリックすると全文が表示されます。

Shorten

デモ

moreをクリックすると短縮された分のテキストが表示されます。全部表示されるとmoreはlessというリンクになるので、lessをクリックすると短縮された状態に戻ります。

この手の機能はコメントやレビューなどに使われているのをよく見かけます。シンプルな機能ですが、そのぶん使いどころはたくさんありますね。

テキスト量が多くて見辛い時やスペースを有効的に活用したい時なんかにも役立つかと思います。

セッティングに関してもこのようにとてもシンプルで使い易いです。

$(element).shorten();

「more」や「less」といった文字は自分の好きなものにカスタマイズすることもできます。

$(element).shorten({
    moreText: 'read more',
    lessText: 'read less'
});



その他にも短縮された状態で表示させる文字数を指定したりといったことも可能です。

というわけで、長いテキストを自動的に短縮させて表示・非表示できるような機能を実装したい方は是非チェックしてみてください。

Shorten

関連記事

  1. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  2. no-image
  3. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

  4. no-image
  5. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

  6. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP