The HTML markup for a wijpager widget looks like this.

Drop down to view markup

<div id="pager">
 </div>

You can initialize the widget with the following jQuery script, which sets the nextPageClass and previousPageClass options to use power and cart icons for the next and previous buttons.

Drop down to view 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>

The markup and script featured here results in the following live widget. Note that there are five pages, and the page that has initial focus (pageIndex) is the third one, so that the previous and next buttons are both visible. Click either button multiple times to cause the other button to disappear, when the end of the pageCount is reached.

See Also

Reference