Linking pages

As mentioned, we can define multiple pages div in jQuery mobile. And actually we can link between them with anchor and hash query as same as building normal website.

So we can create another full screen view with another data-role=page.

We will create a button inside the header that links to the about page.

 <!-- Root page -->
 <div data-role='page' id='root'>
   <div data-role='header'>
     <h1>TwentyFive</h1>
     <a class='ui-btn-right' data-role='button' href='#about'>關於</a>
   </div>
   <div data-role='content'>
     <p id='timer'>00:00</p>
     <a data-role='button' id='reset'>重新計時</a>
  </div>
</div>

<!-- About page -->
<div data-role='page' id='about'>
  <div data-role='header'>
    <h2>關於</h2>
    <a data-icon='arrow-l' data-rel='back'>TwentyFive</a>
  </div>
  <div data-role='content'>
    <p>這是一個 25 分鐘倒計時器。運用了一種稱為 <a href='http://www.pomodorotechnique.com/'>Pomodoro</a> 的工作時間分配技巧。</p>
    <p>電話：<a href='tel:+85366331234'>+853 6633 1234</a></p>
    <p>電郵：<a href='mailto:twentyfive@mz-lab.com'>twentyfive@mz-lab.com</a></p>
  </div>
</div>

Let’s take a look at the result.

What the code just did?

We learnt a new data-* attribute named data-button which generates the button style for us.

Please note that the button style inside header section and in the content page is different, although they share the same HTML code.

And actually I feel uncomfortable to the rounded corner by jQuery mobile. So we can override it in our CSS styling. We know the .ui-but-corner-all class because we use the Chrome Inspector to detect it.

/* override */
.ui-btn-corner-all {
  border-radius: 5px;
}

How about linking back from the about view? We can use data-rel=back for this purpose.

While doing the linking, we use the same technique from web design. We link to the #a_name_of_page.

Throughout the using of jQuery mobile, you will find that it follows quite a lot practice of writing normal web page. It is because it’s aim is to make web designer transits to mobile development as easy as possible.

What’s next? We’re going to take a look at “Timer logic — Entry point”.