JavaScript

ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「jQuery.dotdotdot」

なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuery.dotdotdot」を使ってみました。これとても便利ですね。ボックス要素に収まりきれずはみ出したテキストを「…」に置き換えてくれるプラグインです。使い方もとても簡単です。名前もそのとおりドットドットドットですね。

[ads_center]

使い方

いつも通りhead内にjQuery本体とプラグインファイルを読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dotdotdot-1.4.2-packed.js"></script>

そして収めたいボックス要素を指定します。

<script type="text/javascript">
$(function() {
    $('#dot1').dotdotdot();
});
</script>

マークアップはこんな感じで。

<div id="dot1">サンプルテキストサンプルテキストサンプルテキスト...略...</div>

これだけで、#dot1からはみ出した分のテキストを「…」に置き換えてくれます。

「続きを読む」といったリンクにしたい場合

「…」に置き換えただけだとその後のテキストが見れないので実際に使う場合には「続きを読む」といったリンクに置き換えるかと思います。この場合は以下のようにすると続きを読むためのリンクにすることができます。

JavaScript

<script type="text/javascript">
$(function() {
    $('#dot1').dotdotdot({
        after: 'a.more'
    });
});
</script>

オプションのafterにリンク先に指定してあるクラス名moreが付いたaタグを指定します。

HTML

<div id="dot">サンプルテキストサンプルテキストサンプルテキスト...略...<a href="#" class="more">続きを読む &raquo;</a></div>

そして、テキストの最後にリンク先を追加します。これで、ボックスからはみ出した分のテキストが続きを読むリンク先に置き換えられます。

使い方もとてもシンプルですし、そんな派手なプラグインではない分、色んなところで活躍してくれそうなプラグインかと思います。覚えておくと役立つ時が来るかもしれませんね!

ということでダウンロードは以下のURLからどうぞ。

関連記事

  1. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

  2. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  3. Multi-Step-Form-Js
  4. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  5. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  6. Babylon Grid

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP