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. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  3. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  4. Playful Little Tooltip Ideas
  5. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP