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:
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 this setting in the Jump to page (page input box) section:
- Field label: Go to page:
- Field size: 3
-
Define this 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
You 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>