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.

<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

1. Add the following class to both buttons so that the <a> tags can behave like buttons:
   
   

   <a href="about.html" class="ui-btn">About...</a>
   <a href="summary.html" class="ui-btn">Summary</a>
       

2. Wrap the two <a> tags within a set of <div> tags and give them the following data-role and data-type:
   
   

   <div data-role="controlgroup" data-type="horizontal"> 
     <a href="about.html">About...</a><a href="summary.html">Summary</a>
   </div> 

3. Add an align attribute to the following <div> tag to center the control group .
   
   

   <div data-role="controlgroup" data-type="horizontal" align="center">

Dialogs

Two dialog boxes with transition effect applied to them.

1. 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">

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