My solution to the jquery mobile back button problem

As I’m new to this new jquery mobile, I’m bound to run in to troubles and find unique ways of accommodating solutions.
So, the my first problem I’ve encountered has been trying to implement a back button. After playing with codes and a few options, I got frustrated and have decided to do it my own way.

By default the back button shows, which is great, if your entire site is on one page. It stays self contained and works really well. But, if you are like me and need to use a CMS or implement a site on to multiple pages, you are going to find it a little harder. I could be wrong, and welcome comments on this, but It seems that when you move to an external page from where you just were, the jquery looses it’s history and can’t do a back to the previous page.

So, I just did this:

<body>

<div data-role="page" id="MainPage" data-theme="a" >
<div data-role="header">
<span style="font-size: 9px; text-align: center;">Header</span>
<!-- Copy this 'a' code -->

<a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" data-rel="back" href="javascript:history.back(1) " data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Back</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
</span>
</a>

</div>
<div data-role="content">
<p>Please select a job type</p>
<ul data-role="listview">
<li><a href="#page1">Page 1</a></li>
</ul>
<ul data-role="listview">
<li><a href="#page2">Page 2</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content" data-add-back-btn="true">

<ul data-role="listview">
<li><a href="Page1.html" rel="external">External Link 1</a></li>
<li><a href="Page2.html" rel="external">External Link 3</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
etc...

I used the cs5.5 dreamweaver code base originally, with it only needing these slight mods. Let me know how you go.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: