jQuery mobile button

Normal links aren’t easily clickable by our thumbs when holding the mobile device. We will use button for important link. Button are defined by, you guessed it, a href with data-role='button'.

<div data-role='page' id='root'>
  <div data-role='header'>
      <h1 >Website Title</h1>
  </div>
  <div data-role='content'>
    <p>Assuming we are now showing a sign-up button:</p>
    <a href='#sign-up' data-role='button'>Sign up</a>
  </div>
</div>

The HTML of “Sign up” page:

<div data-role='page' id='sign-up'>
  <div data-role='header'>
    <h1>Sign up</h1>
  </div>
  <div data-role='content'>
    <p>Sign up form goes here.</p>
    <a href='#sign-up-completed' data-role='button'>Submit</a>
    <p><a href='#root'>Cancel and back</a></p>
  </div>
</div>

The page after sign-up completed.

<div data-role='page' id='sign-up-completed'>
  <div data-role='header'>
    <h1>Thanks</h1>
  </div>
  <div data-role='content'>
    <p>Sign up completed.</p>
    <p><a href='#root'>Manage your account</a></p>
  </div>
</div>