+

Search Tips   |   Advanced Search

Portal, V6.1

 

Page navigation design example

This is an example of a design of a page navigation element.

This example will use two page navigation elements to produce a page navigation system similar to this:

<< < ... 4,5,6 ... > >>
Page 5 of 10. Go to page:

Number of items to display: 10 | 50 | All

 

First page navigation element

  1. Create a page navigation component named firstnavigation.

  2. Select both Shuttle (first, previous, next, and last controls) and Paging (page numbering and continuation).

  3. Select Limit number of pages and type 3 in the associated field.

  4. Enter the following text in these element design fields:

    Header 

    <span>
    Footer 

    </span>
    Separator 

     | </span><span>
    First control - active design 

    <font color="#000000">&lt;&lt;</font>
    First control - inactive design 

    <font color="#999999">&lt;&lt;</font>
    Previous control - active design 

    <font color="#000000">&lt;</font>
    Previous control - inactive design 

    <font color="#999999">&lt;</font>
    Next control - active design 

    <font color="#000000">&gt;</font>
    Next control - inactive design 

    <font color="#999999">&gt;</font>
    Last control - active design 

    <font color="#000000">&gt;&gt;</font>
    Last control - inactive design 

    <font color="#999999">&gt;&gt;</font>
    Continuation 

    ...

 

Second page navigation element

  1. Create a page navigation component named secondnavigation.

  2. Select both Jump to page (page input box) and Page size (page size selection).

  3. Define these setting in the Jump to page (page input box) section:

    • Field label:

      Go to page:

    • Field size:

      3

  4. Define these setting in the Page size control section:

    • Field label:

      Number of items to display:

    • Page sizes: 

      10 | 10 50 | 50 0 | All

  5. Enter the following text in these element design fields:

    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>

 

Parent topic

Page navigation element