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」の使い方についてでした。以下のサイトからダウンロードできます。

Macのフォルダ階層を確認Macで現在開いているファイルのフォルダ階層を確認する方法前のページ

Macで見えなくなったライブラリフォルダを表示させる方法次のページMacでライブラリフォルダを表示

関連記事

  1. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  2. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  3. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

  4. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  5. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  6. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

コメント

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

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

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP