概要
少しだけ文章を出しておいて続きを読むみたいなリンクありますよね。
上記をjqueryのreadmore.jsを使って、実装しました。
準備
jquery読み込んだ後にgitからダウンロードしてきたreadmore.jsまたはreadmore.min.jsを読み込ませたらいいかと思います。
もしくはnpmが使える状況であれば npm install readmore.js でダウンロードできます。
公式のgithubはこちらです。
実装
jqueryで要素を指定して、readmoreを呼びます。その中にオプション値が書けます。
・speedが表示スピード
・collapsedHeightが最初に表示しておく高さ
・moreLinkが開くときのリンクのカスタマイズ
・lessLinkが閉じるときのリンクのカスタマイズ
みたいです。
<script>
$(function () {
$('#read_text').readmore({
speed: 100,
collapsedHeight: 25,
moreLink: '<a href="#" class="sm">続きを読む</a>',
lessLink: '<a href="#" class="sm">閉じる</a>'
});
</script>
さらなるオプション
公式のdemoファイルにオプションが書かれていたので転記します。
The options:
speed: 100 in milliseconds
collapsedHeight: 200 in pixels
heightMargin: 16 in pixels, avoids collapsing blocks that are only slightly larger than collapsedHeight
moreLink: '<a href="#">Read more</a>'
lessLink: '<a href="#">Close</a>'
embedCSS: true insert required CSS dynamically, set this to false if you include the necessary CSS in a stylesheet
blockCSS: 'display: block; width: 100%;' sets the styling of the blocks, ignored if embedCSS is false
startOpen: false do not immediately truncate, start in the fully opened position
beforeToggle: function() {} called after a more or less link is clicked, but before the block is collapsed or expanded
afterToggle: function() {} called after the block is collapsed or expanded
blockProcessed: function() {} called once per block during initilization after Readmore.js has processed the block.
ワンポイント
bootstrapと一緒に使ったためか、要素をoverflow-y:hiddenしてあげておかないと、うまく動かなかったので、全文表示されていた場合は試してみてください。
<style>
#read_text {
overflow-y:hidden;
}
</style>
コメント