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

 1<div data-role='page' id='root'>
 2  <div data-role='header'>
 3      <h1 >Website Title</h1>
 4  </div>
 5  <div data-role='content'>
 6    <p>Assuming we are now showing a sign-up button:</p>
 7    <a href='#sign-up' data-role='button'>Sign up</a>
 8  </div>
 9</div>

The HTML of “Sign up” page:

 1<div data-role='page' id='sign-up'>
 2  <div data-role='header'>
 3    <h1>Sign up</h1>
 4  </div>
 5  <div data-role='content'>
 6    <p>Sign up form goes here.</p>
 7    <a href='#sign-up-completed' data-role='button'>Submit</a>
 8    <p><a href='#root'>Cancel and back</a></p>
 9  </div>
10</div>

The page after sign-up completed.

 1<div data-role='page' id='sign-up-completed'>
 2  <div data-role='header'>
 3    <h1>Thanks</h1>
 4  </div>
 5  <div data-role='content'>
 6    <p>Sign up completed.</p>
 7    <p><a href='#root'>Manage your account</a></p>
 8  </div>
 9</div>

What’s next? We’re going to take a look at “UI action flow”.

◀ Page transition UI action flow ▶

makzan.

jQuery mobile button

Makzan | Mobile web design | Table of Content