Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
Like this article? We recommend Creating Spry Regions

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:


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.

  1. 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:
  2. <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.

  3. Save your changes; then click Live View to see the live version.
  4. 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).

  • + Share This
  • 🔖 Save To Your Account