指定数以上を隠したテキストを、もっと読むボタンで表示させるJavaScript「Jquery.readmore」

ブログなどでは概要を一定の文字数で区切って「...read more」みたいのがあります。
これは1ページでより多くの情報を見せられるようにするためと考えられますが、jQueryプラグインの「Jquery.readmore Demo」を利用するとページ遷移することなく続きを見せられるようになります。
続きがあまり長くない場合には有効ではないでしょうか。

使用方法

導入は簡単です。
Jquery.readmoreからjquery.readmore.jsをjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="jquery.readmore.js"></script>	
<script type="text/javascript">
$(function(){
	$(".class名").readmore({ 
		substr_len: 50 //表示させたい文字数
	});
});
</script>
あとは上記クラスを記述すれば完成です。

<p class=".class名">ながいテキスト</p>

サンプル

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar gravida metus at iaculis. Donec malesuada, nisl eu ultrices bibendum, ante metus consequat risus, nec porttitor purus nisl eu libero. Ut libero tortor, pretium nec sagittis ut, pretium nec est. Phasellus volutpat tempor enim ornare fermentum. Nam et lacus lectus, in ultrices augue. Proin nunc augue, scelerisque at pharetra at, gravida nec diam. Phasellus metus nibh, gravida in scelerisque dignissim, vulputate et ipsum.… Cras leo nisi, placerat venenatis laoreet ac, aliquam eget ipsum. Nulla facilisi. Phasellus adipiscing tempus neque, vel semper dolor tempus eget. Aliquam porttitor rhoncus ipsum et luctus. Nullam suscipit pellentesque lectus vitae ultrices. Aliquam rutrum lacus justo, sed bibendum diam. Etiam ut lacinia nulla. Sed sapien nibh, pretium at pretium at, pretium et elit. Etiam venenatis tortor ac turpis scelerisque imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar gravida metus at iaculis. Donec malesuada, nisl eu ultrices bibendum, ante metus consequat risus, nec porttitor purus nisl eu libero. Ut libero tortor, pretium nec sagittis ut, pretium nec est. Phasellus volutpat tempor enim ornare fermentum. Nam et lacus lectus, in ultrices augue. Proin nunc augue, scelerisque at pharetra at, gravida nec diam. Phasellus metus nibh, gravida in scelerisque dignissim, vulputate et ipsum.… Cras leo nisi, placerat venenatis laoreet ac, aliquam eget ipsum. Nulla facilisi. Phasellus adipiscing tempus neque, vel semper dolor tempus eget. Aliquam porttitor rhoncus ipsum et luctus. Nullam suscipit pellentesque lectus vitae ultrices. Aliquam rutrum lacus justo, sed bibendum diam. Etiam ut lacinia nulla. Sed sapien nibh, pretium at pretium at, pretium et elit. Etiam venenatis tortor ac turpis scelerisque imperdiet.

sponsors


Javascriptサンプルページ一覧
skuare.net