- What You Will Learn
- Defining a Static Site
- Passing and Using Data with Ajax
- Connecting the Country Profiles Page to HTML Data
- Styling the Spry Table
- Creating Spry Regions
- Displaying with a Spry Accordion
- Adding Images and the Country Name
- Refining Page Display Using CSS Styling and Positioning
- What You Have Learned
- Additional Spry Functionality in Dreamweaver CS4
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating Spry Regions
You have only just begun to tap the power of Spry. It was easy to make a table with sortable columns and remarkably simple to style the table and add some rollover functionality. Clicking on the rows in your Spry table can also act as a triggering event for other elements on the page. Rather than send users off to another page to view the details of the selected country, or even back to the server for more information, you can use Spry to display the relevant information on the page in a quick, compact, and visually pleasing way.
The table row that you modified earlier had a Spry attribute that might not have been entirely self-evident:
spry:setrow="ds1"
This indicates that when a row is selected, it will set any detail regions with a value of ds1 to be on the same row of data as the one selected. A detail region is a Spry area that displays the values for bound variables specific to the record selected in the main Spry region. We'll start with a simple example of this relationship between the selected row of the table and other data on the page.
- Return to profiles.html. Place your cursor after the closing </div> tag that follows the closing </table> tag. Press Enter (Return) once to make some space, and enter the following code:
- Save your changes; then click Live View to see the live version.
<p spry:detailregion="ds1">Record {ds_RowNumberPlus1} of {ds_RowCount}</p>
This code creates a paragraph that acts as a Spry detail region. Any Spry variables inside the paragraph respond when the user selects an element in the Spry region: ds_RowNumberPlus1 displays the number of the currently selected row; ds_RowCount displays the total number of rows in the dataset.
As you select the various rows in the table, the detail region is updated. Even when you re-sort the table, the detail region responds to the selected item's new position in the table and adjusts accordingly (see Figure 27).
){kind=small}
