<script src="http://yourdomian/jquery.js" type="text/javascript"></script>
<script src="http://yourdomian/jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#id名').pager('分割する要素', {
navId: 'nav', //ナビゲーションに付与するid
height: '12em', //ページの高さ
prevText: 'Previous', //前ページのリンク文字
nextText: 'Next', //後ページのリンク文字
linkText: ['Page 1', 'Page 2', 'Page 3', 'Page 4'] //ページごとのリンク文字
});
});
</script>
そして、id名で括ったコンテンツを分割したい位置で、上記で指定した要素で囲めば完成です。<div id="id名"> <分割する要素> コンテンツ</分割する要素> </div>
【P.1】
Donec ultricies lectus. Cras nonummy, enim ac iaculis blandit, diam quam accumsan diam, ut faucibus nisi lorem non est. Proin convallis. Fusce malesuada lectus sed dui. Curabitur nec massa a arcu ullamcorper tincidunt. Nulla mattis, orci a tincidunt sollicitudin, orci eros porta tellus, lobortis aliquet arcu purus ac dui. Nullam consequat, sem nec fermentum consequat, magna lacus tincidunt ligula, vel tincidunt velit sem eu nisi. Vivamus fermentum tristique dui. Integer quis arcu ut metus fringilla laoreet. Nunc congue vehicula enim. Vestibulum lacus. Quisque feugiat, nisl eget congue volutpat, metus ante interdum turpis, id iaculis justo lorem at pede. Sed dui eros, ultricies non, volutpat ut, volutpat sed, tellus. Aliquam a nibh.
【P.2】
Mauris quis risus. Mauris ut risus. Proin auctor dictum ante. Ut cursus. Nulla quis ante nec augue rutrum egestas. Vestibulum orci lorem, euismod ac, nonummy in, auctor vel, augue. Quisque vulputate, lorem ac tincidunt dignissim, libero pede pulvinar risus, ac lobortis dolor urna non elit. Morbi porttitor ipsum quis ligula vulputate molestie. Maecenas eget lectus mattis eros mollis fringilla. In eleifend dignissim velit. Maecenas metus purus, pretium sit amet, interdum vitae, interdum non, est. Vivamus purus enim, iaculis sed, consequat venenatis, tempor sed, lacus. Sed ornare. Ut lorem mauris, congue non, bibendum eget, laoreet eget, elit. Morbi mauris. Fusce urna massa, malesuada sit amet, cursus nec, dapibus sed, odio. Donec varius risus eu nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam id nisi.
【P.3】
Aenean pulvinar, erat nonummy auctor bibendum, nisi velit commodo turpis, non venenatis metus magna ac dui. Integer vehicula ligula eget leo. Nulla sagittis tincidunt enim. Integer quis augue. Proin sapien ligula, pharetra id, convallis dictum, feugiat non, ipsum. Etiam non lacus a magna aliquam auctor. Integer elementum. Mauris massa odio, viverra in, facilisis sed, condimentum eu, diam. Integer dui. In dictum imperdiet magna. Nam cursus, nulla a lacinia porttitor, eros tortor condimentum erat, ac ultrices nisl ante at urna. Etiam a tortor sit amet metus consequat pulvinar. Nam auctor urna nec libero. Integer tristique dui molestie lectus. Ut nibh purus, sagittis ut, vestibulum ac, commodo in, purus. Aenean dictum. Vivamus suscipit dapibus massa. Ut rhoncus ullamcorper justo. Morbi orci sem, congue eu, viverra aliquam, porttitor vel, magna.
【P.4】
Proin ligula arcu, feugiat ac, tincidunt vel, bibendum at, eros. Duis mollis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin at quam quis leo fringilla elementum. Morbi sagittis commodo pede. Integer blandit, tortor bibendum placerat suscipit, tortor urna mattis nisi, sed mollis dolor purus nec est. In vitae enim. Cras commodo sem eu mauris. Suspendisse non risus non massa cursus blandit. Aenean quis lectus a sapien aliquet posuere. In ornare iaculis urna. Duis ultrices odio eu turpis. Nunc eget quam ornare ante scelerisque sollicitudin. Etiam non lectus. Sed sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sit amet neque tempus nunc hendrerit mattis. Suspendisse potenti. Duis diam orci, ultrices vitae, iaculis in, laoreet nec, felis. Mauris eu mauris.