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からどうぞ。

WordPressのログイン時のツールバーWordPressの囲み型ショートコードの基本的な使い方前のページ

WordPressでプラグインなしで関連する記事を一発で呼び出す関数をfunctions.phpに記述してみる次のページWordPressのログイン時のツールバー

関連記事

  1. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  2. cascadingDivs
  3. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  4. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  5. Bootstrap Dropdown Hover
  6. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

コメント

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

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

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP