Paginate

ページネーションに関する機能の説明と使用例です。

タイプ

リスト(デフォルト)

<div class="ec-base-paginate typeList">
    <a href="{$変数}" class="btnPrev">前へ</a>
    <ol>
        <li><a href="{$変数}" class="{$変数}">{$n}</a></li>
        <li><a href="{$変数}" class="{$変数}">{$n}</a></li>
        <li><a href="{$変数}" class="{$変数}">{$n}</a></li>
    </ol>
    <a href="{$変数}" class="btnNext">次へ</a>
</div>

スワイプ

スワイプタイプの場合、変数を用いてコードの処理を行います。そのため、ユーザも使用は可能ですが修正を行うことができません。

<div class="ec-base-paginate paginate typeSwipe">
    <button type="button" class="prev">
        <span>前へ</span>
    </button>
    <span>
        <button type="button" class="circle selected">
            <span>1番目のリスト</span>
        </button>
        <button type="button" class="circle">
            <span>2番目のリスト</span>
        </button>
        <button type="button" class="circle">
            <span>3番目のリスト</span>
        </button>
    </span>
    <button type="button" class="next"><span>次へ</span></button>
</div>

トータル

トータルタイプの場合、変数を用いてコードの処理を行います。そのため、ユーザも使用は可能ですが修正を行うことができません。

<div class="ec-base-paginate paginate typeTotal">
    <p class="icoPrev"><a href="#none"><span>前へ</span></a></p>
    <p><strong>1</strong> / 99,999</p>
    <p class="icoNext"><a href="#none"><span>次へ</span></a></p>
</div>

Cafe24 Smart design Support

Paginate

タイプ

リスト(デフォルト)

もっと見る(非同期読み込み)

スワイプ

トータル