Follow @papepo100
    

ページナビゲーションに出力するページ番号の数を画面幅に応じて自動調整する方法

ブログパーツ
0 0 2017/01/21
pagenavi2.png これまで作成したページナビゲーションでは出力するページ番号の数を関数呼び出しの際に指定していました。
しかしこれでは出力するデバイスによっては2列になってしまったり、逆にiPadでは画面幅の対して出力する数が少なくなってしまったりします。
そこでJQueryを使って画面幅に応じて出力するページ番号数を自動調整するように変更しました。
まずはテンプレートの<head>~</head>内に以下を追加します。(jquery.min.jsの追加は適宜行います。)
ページナビゲーションのクラス名(page_navi, pager_next, pager_prev)とページ番号の幅(35)等は適宜変更する必要があります。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
<!--topentry-->
<script>
$(function() {
    page = $('.page_navi');
    entry = $('.pager_next');
    if (!entry.outerWidth()) {
        entry = $('.pager_prev');
    }

<!--not_permanent_area-->
    text = pagenavi(Math.floor((page.width()-entry.outerWidth()*2-50)/35), "<%total_pages>", "<%nextpage_url>", "<%prevpage_url>", ".html");
<!--/not_permanent_area-->

<!--permanent_area-->
    text = pagenavi(Math.floor((page.width()-entry.outerWidth()*2-50)/35), total("<%url>"), "<%nextentry_url>", "<%preventry_url>", ".html", "<%topentry_link>");
<!--/permanent_area-->

    $("#pagenumber").append($(text));
});
</script>
<!--/topentry-->
</script>
ページナビゲーションを出力する位置に以下を追加します。
<div id="pagenumber"></div>
スタイルシートに以下を追加します。
#pagenumber {
    display: inline-block;
}
以上で画面の幅に応じてページナビのサイズが変更されて出力されるはずです。
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント