no-image

JavaScript

続きを読むボタンを実装できる「ReadMorePlugin」

ReadMorePluginは「続きを読む」、「もっと読む」、「Read More」などといったボタンを実装できるjQueryプラグインです。長文ページで全テキストを表示するのはスペース的にも余裕がないなんて時に活躍してくれますね。

ReadMorePlugin

ReadMorePlugin

デモではテキストの下に「Read More…」というボタンが設置されていて、ここをクリックすると続きの文章が表示されます。全文が表示されると先ほどの「Read More…」が「Read Less…」という文字に変化します。再度これをクリックすると最初の時のように続きのテキスト部分が非表示になります。

表示・非表示をユーザー自身がコントロールできるのが便利ですね。ブログなどで長い文章を表示させる時に、Read Moreボタンを設置したいという人は、ぜひ「ReadMorePlugin」を活用されてみてはいかがでしょうか?

オプションには、hideText、readText、isTextShown、effect、effectOption、buttonClasses、idといった項目が用意されています。ちょっとしたカスタマイズにも対応しているので、気になる人はぜひチェックしてみてください。

ReadMorePluginのライセンスはMITになります。

Alerts.cssシンプルでピュアなCSSによるアラート実装「Alerts.css」前のページ

インタラクティブな背景を実装できる「Brusher」次のページBrusher

関連記事

  1. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  2. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  3. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  4. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  5. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

  6. Recursive Hover Nav

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP