ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Readmore.jsはJavaScript製のオープンソース・ソフトウェアです。

Webサイトを何らかのシステムを使って構築すると思いもしなかった入力が行われることがあります。その一つが文字列が予定よりも多く、ページが見づらくなってしまう場合です。そこで使ってみたいのがテキストの折りたたみ表示を行うReadmore.jsです。


デモです。画面中央のRead Moreがあります。これをクリックします。


広がりました。一番下にはCloseがあり、これをクリックするとまた元の表示に戻ります。

当たり前のように見えるのですが、広げた後の閉じるがきちんと用意されているのが好感です。なお指定は文字数ではなく、DOMの高さになります。そのため、半角全角がおり混ざったとしてもぎりぎりまで表示されるようになります。


MOONGIFTはこう見る

JavaScriptで画面のUIを操作すると、最初のアクションは格好よくとも、それを戻すアクションは不格好なことが多々あります。最悪、開くアクションはあるのに閉じる方がないこともあります。これではまさに片手落ちです。

Readmore.jsで面白いのはCloseボタンを押した時に、Read Moreのリンクの所にマウスが当たっていることです。コンテンツの高さが変わればマウスはそのまま残ってしまいそうですが、あえてスクロールして追従しているようです。これのお陰で可読性が随分向上しています。

Readmore.js: jQuery plugin for long blocks of text

jedfoster/Readmore.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2