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. JavaScript

    レスポンシブ対応のカッコイイLightbox風jQueryプラグイン「Lightcase」

    Lightcaseはフレキシブルでレスポンシブに対応したLightbo…

  2. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  3. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  4. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  5. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

  6. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

コメント

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

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

最近の記事

  1. Anker PowerPort PD 1 & ライトニングケーブル(0.9m ホワイト)
  2. オリジナルチキン6ピース
  3. 200-DGCAM019
  4. ハクバ GW-PRO RED フォトグローブプロ PL

アーカイブ

PAGE TOP