|
User assistance for content authors |
|---|
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:
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| 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 ...
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:
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>
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>