(Optional) Add a top and bottom list divider to the ListView by adding a data-role = "list-divider" to <li> tag above and below the existing <li> tags. Then add text to the top <li> tag and a non-breaking space ( ) to the bottom <li> tag.
Example:
<ul data-inset="true" data-role="listview" data-divider-theme="a">
<li data-role="list-divider">Adobe CC Applications:</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li data-role="list-divider"> </li>
</ul>
(Optional) Add a icon to the home button by adding the following data-icon attribute to the <a> tag.
<a href = "index.html" data-icon="home">Home</a>
Add the following class to both buttons so that the <a> tags can behave like buttons:
Example:
<a href="about.html" class="ui-btn">About...</a><a href="summary.html" class="ui-btn">Summary</a>
We will create two dialog boxes with transition effect applied to them.
Add the following data-dialog attribute to the main page content.
<div data-role="page" id="about_page" data-theme="b" data-dialog="true">
<div data-role="header" data-theme="a">
Return back to the index.html page and add a data-transition attribute to the About and Summary buttons in the footer.
<div data-role="controlgroup" data-type="horizontal" align="center">
<a href="about.html" class="ui-btn" data-transition="slidedown">About...</a>
<a href="summary.html" class="ui-btn" data-transition="slidedown">Summary</a>
</div>