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

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  2. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  3. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  4. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

  5. CSS Emoticons
  6. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

最近の記事

  1. 生ハム&モッツァレラチーズ サラダラップ
  2. コガネムシ
  3. ショルダーハム&5種の野菜サンドイッチ
  4. ジョン・リーチ マグカップ
PAGE TOP