JavaScript/PageNavi(1)

id: 165 所有者: msakamoto-sf 作成日: 2009-02-08 18:00:22
カテゴリ: JavaScript

[ Prev ]
[ Next ]
[ JavaScript ]

お仕事で、JavaScriptで「前へ」「次へ」を実装することになりました。まぁ、jQuery使ってOKで、ちゃんとレビューしてくれる技術者も居ますので勉強がてら試作してみます。
横方向に滑らかにスクロールするのは「カルーセル」(carousel)と呼ばれてるらしく、こんなのもあるようです。

カルーセル表示するJavaScriptライブラリ（jCarousel Lite）
- http://youmos.com/news/jcarousel_lite
jCarousel Lite
- http://www.gmarwaha.com/jquery/jcarousellite/index.php

今回は単純にページ遷移無しで表示が切り替われば良いので、ページの単位となるdivタグブロックを"display: none"でページ数分出力しておき(実際はプログラムが動的に生成すると思われます)、「前へ」「次へ」クリックされた時にdisplayを順繰りに"block"にしていけばOKっぽいです。というか動作原理として。

というわけで、ちょっと長いですが試作品第一号。

ID属性とかかなり決め打ち使ってますので汎用性は低いです。あと、{next|prev}page()がbooleanを返していますが、作り始めた当初はこれで前/次のリンク状態を交信させようとしてたからです。{next|prev}ok()とupdate_navilinks()を実装したら、使わなくなっちゃいました。

<html>
<head>
<style type="text/css">
<!--
/* 前/次のリンクでアンダーライン付(有効)/無し(無効)切り替えする為のCSSクラス */
a.pagenavi_enabled:link {
    text-decoration: underline;
}
a.pagenavi_enabled:visited {
    text-decoration: underline;
}
a.pagenavi_disabled:link {
    text-decoration: none;
}
a.pagenavi_disabled:visited {
    text-decoration: none;
}
-->
</style>
<script src="../jquery-1.2.6.min.js" type="text/javascript" ></script>
<script type="text/javascript">

var objPager = {
    all : 0,
    current : 1,
    nextok : function() {
        /* 「次へ」リンクが使えるか否かを返す */
        if (2 > this.all) {
            return false;
        }
        if (this.current == this.all) {
            return false;
        }
        return true;
    },
    prevok : function() {
        /* 「前へ」リンクが使えるか否かを返す */
        if (2 > this.all) {
            return false;
        }
        if (1 == this.current) {
            return false;
        }
        return true;
    },
    nextpage : function() {
        var cur = this.current;
        cur++;
        if (cur > this.all) {
            return false;
        } else {
            this.current = cur;
            return !((cur + 1) > this.all);
        }
    },
    prevpage : function() {
        var cur = this.current;
        cur--;
        if (cur < 1) {
            return false;
        } else {
            this.current = cur;
            return (cur - 1) > 0;
        }
    },
    nil : null
};

objPager.update_navilinks = function() {
    /* 前/次リンクの状態を更新する */
    $('#page_prev').attr(
        'class', 
        this.prevok() ? 'pagenavi_enabled' : 'pagenavi_disabled');
    $('#page_next').attr(
        'class', 
        this.nextok() ? 'pagenavi_enabled' : 'pagenavi_disabled');
}

$(document).ready(function(){
    objPager.all = $('#page_container > div').size();
    if (0 < objPager.all) {
        $('#page_container>div:first').css('display', 'block');
        $('#pageno_cur').text(objPager.current);
        $('#pageno_all').text(objPager.all);
    }
    if (1 < objPager.all) {
        objPager.update_navilinks();
        $('#page_prev').click(function(event){
            var old = objPager.current;
            var r = objPager.prevpage();
            var prev = objPager.current;
            var id = null;
            if (old == prev) {
                return;
            }

            /* ページブロックの表示切り替え */
            $('#pageno_cur').text(objPager.current);
            id = '#page_' + old;
            $(id).css('display', 'none');
            id = '#page_' + prev;
            $(id).css('display', 'block');

            /* 前/次リンクの状態更新 */
            objPager.update_navilinks();

            event.preventDefault(); // これ、毎回必要なのかな？
        });
        $('#page_next').click(function(event){
            var old = objPager.current;
            var r = objPager.nextpage();
            var next = objPager.current;
            var id = null;
            if (old == next) {
                return;
            }

            /* ページブロックの表示切り替え */
            $('#pageno_cur').text(objPager.current);
            id = '#page_' + old;
            $(id).css('display', 'none');
            id = '#page_' + next;
            $(id).css('display', 'block');

            /* 前/次リンクの状態更新 */
            objPager.update_navilinks();

            event.preventDefault(); // これ、毎回必要なのかな？
        });
    }
});
</script>
</head>
<body>

<div id="page_navi">
page <span id="pageno_cur"></span> / all <span id="pageno_all"></span>, 
<a href="#" id="page_prev" class="pagenavi_disabled">prev</a>&nbsp;/&nbsp;
<a href="#" id="page_next" class="pagenavi_disabled">next</a>
</div>
<hr />
<div id="page_container">
<?php for ($i = 1; $i <= 10; $i++) : ?>
<div id="page_<?php echo $i; ?>" style="display: none">
Page Block No <?php echo $i; ?>.
</div>
<?php endfor; ?>
</div>

</body>
</html>