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

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  2. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  3. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  4. no-image

    JavaScript

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

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

  5. vDrop

    JavaScript

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

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

  6. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

コメント

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

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

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP