マークアップとスクリプティング

wijpager ウィジェットの HTML マークアップは次のようになります。

マークアップ	コードのコピー
<div id="pager"> </div>

次の jQuery スクリプトを使用してウィジェットを初期化できます。このスクリプトは、nextPageClass およびpreviousPageClass オプションを設定して、次へボタンおよび前へボタンとして電源アイコンとカートアイコンを使用します。

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#pager").wijpager({ pageCount: 5, pageIndex: 2, mode: "nextPrevious", nextPageClass: "ui-icon-power", previousPageClass: "ui-icon-cart" }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $("#pager").wijpager({
            pageCount: 5,
            pageIndex: 2,
            mode: "nextPrevious",
            nextPageClass: "ui-icon-power",
            previousPageClass: "ui-icon-cart"
        });
    });

</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。５つのページがあり、最初にフォーカスがあるページ（pageIndex）は３ページ目です。このため、前へボタンと次へボタンが両方とも表示されます。一方のボタンを何回かクリックし、pageCount が先頭または末尾に達すると、そのボタンは表示されなくなります。

関連トピック

参照