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:

Table 1. Examples of the two page navigation elements that produce a page navigation system
`<<`	`<`	`...`	`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:

Table 2. First page navigation element design
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	...

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:

Table 3. Second page navigation element design
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>

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>