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

Zoom Sliderズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」前のページ

iPhoneのSafariで複数あるタブの順番を入れ替える(並べ替え)やり方次のページタブの順番を入れ替える

関連記事

  1. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  2. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  3. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  4. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  5. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  6. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP