Home Page

List Divider

(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 (&nbsp;) 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">&nbsp;</li>
</ul>

Home Button Icon

(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>

Control Group

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>

  1. Wrap the two <a> tags within a set of <div> tags and give them the following data-role and data-type:
    Example:
    <div data-role="controlgroup" data-type="horizontal">
    <a href="about.html">About...</a><a href="summary.html">Summary</a>
    </div>
  2. Add an align attribute to the following <div> tag to center the control group .
    Example:
    <div data-role="controlgroup" data-type="horizontal" align="center">

Dialogs

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>

ToolTips

  1. On any page (in this case, about.html) select a word or phrase in one of the sentences (in this case, jQueryMobile Framework) and create a link within the page to the tooltip that will be created next (e.g., #popupjQueryMobile).
  2. Then in Code View, add the following attributes to the link:
    <a href="#popupjQueryMobile" data-rel="popup" data-transition="flow">jQueryMobile Framework</a>
  3. Then create a tooltip popup with the following three tags. You don't need the space between the lines.
    <div data-role="popup" id="popupjQueryMobile" data-theme="a">

    <a href="#" data-rel="back" data-role="button" data-icon="delete" class="ui-btn-right" data-iconpos="notext">Close</a>

    <p>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.</p>

    </div>