widget:deck

Purpose

Defines a Deck widget.

Contains

Attribute groups

Actions

Action Description
first-page Displays the first page of a deck, unless deck is displaying the first page
last-page Displays the last page of a deck, unless deck is displaying the last page
next-page Displays the next page of a deck, unless deck is displaying the last page
previous-page Displays the previous page of a deck, unless deck is displaying the first page

Properties

Property Description Type Access
current-page-number The number of the page being displayed xs:integer read 
pages-count The total number of available pages xs:integer read 

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:deck</title>
  </head>
  <body>
    <widget:deck id="deck" style="mcs-deck-mode:switch">
      <widget:deck-page>
        <h1 style="text-align:center">Deck Widget</h1>
      </widget:deck-page>
      <widget:deck-page>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </widget:deck-page>
      <widget:deck-page>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
          himenaeos.</p>
      </widget:deck-page>
      <widget:deck-page>
        <p>Aliquam turpis turpis, fermentum at, dapibus sed, scelerisque eget, elit. Etiam
        augue.</p>
      </widget:deck-page>
    </widget:deck>
    <table style="width:100%">
      <tr>
        <td style="text-align:left">
          <widget:button action="deck#first-page">&lt;&lt;</widget:button>
          <widget:button action="deck#previous-page">&lt;</widget:button>
        </td>
        <td style="text-align:center">
          <widget:display property="deck#displayed-page-number"/> of <widget:display
            property="deck#pages-count"/>
        </td>
        <td style="text-align:right">
          <widget:button action="deck#next-page">&gt;</widget:button>
          <widget:button action="deck#last-page">&gt;&gt;</widget:button>
        </td>
      </tr>
    </table>
  </body>
</html>

Related topics