Table of contents Previous Next
Components
The following article discusses how to build the page navigation component for the River Bend Site. When creating the component, there are two key steps involved.
1.
Creating the Page Navigation Component, and,
2.
Referencing the Page Navigation Component from within the Menu Components.
A page navigation element provides navigation controls that are used to navigate through a set of results generated by menus, navigators and search elements only. To use a page navigation element, you must create a page navigation component. You cannot add a page navigation element to authoring templates, sites, site areas, or content items.
A page navigation element can generate two kinds of page navigation controls:
- Shuttle controls provide navigation relative to the current page. This includes sequential linking to the previous or next page of results and quick linking to the first and last pages in the set.
- Paging controls provide navigation according to the page number of the result set. A list of page number links is displayed, along with a continuation link for access to the previous or next set of page numbers, if all page numbers are not displayed.
A page navigation element can combine both shuttle and paging controls.
For our River Bend Company web site, we will create a page navigation component that we will be adding in the footer of the menu component menu-products.
1. Click
New and choose
Component Page Navigation
2. Choose
pageNavigator
3. In Page Navigation Element section, choose the following:
a. Shuttle (first, previous, next, and last controls)
b. Paging (page numbering and continuation)
4. In the header, enter the following html
5. In the Separator, enter the following
6. In the footer, enter the following
7. Follow Figure 27 for the rest of the values
Figure 27 Html values for the shuffle paging controls (327_8)
8. Click
Save…, and then click
Save and Close.
1. In the items view navigator, expand
Components
2. Expand
Menu Components
3. Choose
Menu-Products
4. Click
Edit
5. In the
Menu design properties section, change the value in
Results per page to 1.
 Note:
This is only done for illustration purposes, in order to have many pages to navigate on.
|
6. In the footer field, enter the following html before the closing of the table
7. Click
Save…, and then click
Save and Close.
Refer to Figure 28 for the outcome of rendering the products menu component in the Coffee page
Figure 28 Part of the Coffee page, showing the Menu and Page Navigators (327_9)