Tweet｜ ｜ ｜ ｜

[ 1分で読めて簡単導入できます]

ブログなどでは概要を一定の文字数で区切って「...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>
指定文字数以上を隠して、もっと読むボタンで表示させるJavaScript「Jquery.readmore」サンプル

記事作成：2010年07月30日