Page navigation design example
This is an example of a design of a page navigation element.
This example uses two page navigation elements to produce a page navigation system like this:
<<
<
...
4,5,6
...
>
>>
Page 5 of 10. Go to page: Number of items to display: 10 | 50 | All
First page navigation element
- Create a page navigation component named "firstnavigation".
- Select both Shuttle (first, previous, next, and last controls) and Paging (page numbering and continuation).
- Select Limit number of pages and type 3 in the associated field.
- Enter the following text in these element design fields:
Design Element Design code Header <span>
Footer </span>
Separator | </span><span>
First control - active design <font color="#000000"><<</font>
First control - inactive design <font color="#999999"><<</font>
Previous control - active design <font color="#000000"><</font>
Previous control - inactive design <font color="#999999"><</font>
Next control - active design <font color="#000000">></font>
Next control - inactive design <font color="#999999">></font>
Last control - active design <font color="#000000">>></font>
Last control - inactive design <font color="#999999">>></font>
Continuation ...
Second page navigation element
- Create a page navigation component named "secondnavigation".
- Select both Jump to page (page input box) and Page size (page size selection).
- Define these setting in the Jump to page (page input box) section:
- Field label: Go to page:
- Field size: 3
- Define these setting in the Page size control section:
- Field label: Number of items to display:
- Page sizes:
10 | 10 50 | 50 0 | All
- Enter the following text in these element design fields:
Design element Design code Header <span> Page [PageInfo value="currentPage" ] [PageInfo value="unknownPages" knowntext="of" unknowntext="of at least" ] [PageInfo value="totalPages" ]. </span> <span>Footer | </span>
Separator </span><span>
Referencing the page navigation components in another element design
We use component tags to reference both page navigation components in another element design, such as a menu:
<div> [component name="firstnavigation" ] <br> [component name="secondnavigation" ] </div>
Parent Use a page navigation elementRelated tasks:
Create a page information tag