もっと読む機能をサクッと実装したいなら「Readmore.js」

「Readmore.js」は”もっと読む”機能をJavaScriptたった1行で実装できてしまうjQueryプラグインです。

Readmore.js

readmore-demo-1

もっと読む機能の実装はプログラミングの入門として向いていると思うのですが、玄人の方にしたらいちいち実装が手間だと思います。そんな手間をたった1行で省いてくれるので便利なプラグインです。

 

この状態で、”Read More”を押します。

readmore-demo-2

 

するとJSでの制御なのでこの通り、画面遷移なくサクッと開きます。その分ページ読み込みが重くなってしまうのはご愛嬌なのですが。しっかりと”Close”ボタンもついているのがいいですね。

readmore-demo-3

 

 

それでは「Readmore.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="readmore.js"></script>

 

HTMLはこのようにマークアップします。

<article class="slide">
<h2>Artisanal Narwahls</h2>
<p>Salvia portland leggings banh mi fanny pack mixtape, authentic bushwick wes anderson intelligentsia artisan typewriter high life they sold out mixtape high life. Marfa ethnic wayfarers brooklyn keytar mixtape. Blue bottle shoreditch gluten-free, mixtape hoodie whatever pinterest viral twee fashion axe high life irony biodiesel tofu.</p>

<p>Retro church-key thundercats keytar, skateboard irony selvage ethnic freegan banjo pour-over fixie. Raw denim fashion ax eoke locavore disrupt, tonx retro authentic letterpress raw denim stumptown mixtape ugh kale chips flexitarian 90's deep v. Squid fingerstache bespoke wolf DIY. Banjo pour-over shoreditch cardigan try-hard.</p>

<p>Skateboard artisan bicycle rights next level vinyl cardigan beard twee, farm-to-table truffaut. Shoreditch freegan cliche thundercats, bushwick VHS intelligentsia selfies ethnic try-hard before they sold out. Marfa terry richardson hella, seitan odd future pug butcher. Wes anderson tousled YOLO cardigan. Typewriter high life carles, artisan gentrify messenger bag single-origin coffee truffaut thundercats cray 90's pour-over seitan. Banksy 8-bit organic, salvia gentrify stumptown wayfarers. Godard echo park before they sold out chambray, skateboard twee mcsweeney's synth hella.</p>

<p>Flannel pinterest Austin twee narwhal, hoodie swag wolf photo booth. Hella kale chips marfa occupy pitchfork put a bird on it. Semiotics dreamcatcher selfies beard DIY umami craft beer 3 wolf moon. Try-hard literally mustache polaroid ennui VHS. High life fixie wolf, trust fund twee seitan pinterest blog helvetica sriracha. Tattooed selvage try-hard, biodiesel banjo direct trade echo park kogi tonx bespoke. Pork belly put a bird on it iphone, fixie literally bespoke tonx butcher +1 swag.</p>

</article>

 

JavaScriptはこのように実装します。ここでheightを指定し、Read Moreでどこまでを隠すか(逆にどこまで見せるか)を指定します。

$('article').readmore({maxHeight: 180});

 

するとこのように作ることができました

readmore-sample-1

便利ですね〜、手軽でいいです。面倒くさいという人は参考にどうぞ。

 

Home > JavaScript > もっと読む機能をサクッと実装したいなら「Readmore.js」

Return to page top