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