Part 9—Create dedicated mobile website

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

License

jQuery mobile button Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.