trunk8

JavaScript

長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてくれる便利なjQueryプラグイン「trunk8」を使ってみました。もちろん「read more」などのリンクを付け加えて続きを読めるようにもすることが可能です。サイドバーや色んなところでスペースを有効活用したい時に役立つプラグインかと思います。以下、使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたtrunk8.jsを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="trunk8.js"></script>

あとはtrunk8をセットするだけです。

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

上記のデフォルトでは1行内にテキストが収まるように短縮されます。これを、2行や3行などといった好きな行数で表示させたい場合は、以下のようにlinesというオプションに表示させたい行数の数字を指定します。

// 2行に表示させるためのオプション
$('#sample').trunk8({
    lines: 2
});

うまく収めるだけでなく、例えば「もっと読む」といったリンクを付け加えたいといった場合は以下のように記述します。

$('#sample').trunk8({
    fill: '&hellip; <a id="read-more" href="#">もっと読む</a>'
});
$('#read-more').live('click', function (event) {
    $(this).parent().trunk8('revert').append(' <a id="read-less" href="#">やっぱり隠す</a>');
    return false;
});
$('#read-less').live('click', function (event) {
    $(this).parent().trunk8();
    return false;
});

ちなみにはみだしたテキストを置き換える文字を変更したい場合は、 以下の部分を

fill: '&hellip; <a id="read-more" href="#">もっと読む</a>'

こんな感じで好きな文字に指定することもできます。

fill: '... <a id="read-more" href="#">もっと読む</a>'

というわけで、長すぎるテキストや要素内からはみ出したテキストをうまく収めたい時に役立つjQueryプラグイン「trunk8」の使い方についてでした。以下のサイトからダウンロードできます。

関連記事

  1. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  2. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  3. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

  4. stickyTableColumns

    JavaScript

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

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

  5. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

  6. jQuery Accordion

コメント

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

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

最近の記事

  1. LAOWA 10-18mm F4.5-5.6 FE Zoom
  2. M3IETW BLACK
  3. V60珈琲王2 コーヒーメーカー
  4. Anker PowerCore Lite 20000
  5. ネクスタイム

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP