YUI Library Home

YUI Library Examples: Paginator: Rendering controls into multiple containers

Paginator: Rendering controls into multiple containers

In this example, we will add pagination to an ordered list. Some things to note:

  • Pagination controls are added in a <span> as well as in a <p>.
  • All included pagination controls use inline elements, so the containers needn't be block elements.
  • A custom skin treatment has been applied.
  • State changes made to the Paginator propagate to all controls in all containers.

1987 US Billboard Top 40!

Random content with pagination controls embedded inline. Suspendisse vestibulum dignissim quam. Integer vel augue. Phasellus nulla purus, interdum ac, and here they are. and now back to random content habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Example Data

In this example, we'll be working with a data array stored in YAHOO.example.data.top40.

Start with the content

All of Paginator's UI Components render inline elements, so you can include them almost anywhere. We'll create two container elements in our content, a <span>, nested in a paragraph above the list, and a separate <p> below it.

Add code to update the content region

We'll generate the content by pulling a slice of our data array and wrapping each item in <li> and <p> tags.

Add pagination

Create a Paginator, identifying the two containers span_container and p_container. For fun, we use a custom template and configure the included UI Components for extra customization.

Attach the content handler to the Paginator's changeRequest event and make the appropriate changes in the handler to use the Paginator's passed state data. render() the Paginator and, in this case, call the content generation code directly to initialize the list.

Add style

For this example, we've given the UI Components some special visual treatment. Outside of this, there is one CSS override that was necessary for the <span> container.

Though the elements themselves are inline elements, the container is styled as display: block by Sam skin. To keep the <span> from breaking the normal rendering of the enclosing <p>, we add the following CSS:

Full code listing

JavaScript

CSS

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings