Enabling automatic back buttons in jQuery Mobile

In earlier versions of jQuery Mobile, your page headers automatically had a back button added to them. This was removed during the development cycle but you can add them back in a variety of ways. However, one method, turning it on at a global level, wasn’t very clear to me. If you read the docs, you see this:

The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true.

I had no idea what the page plugin even was. I assumed it was part of the jQuery Mobile framework specifically designed for page support, but I didn't know how to translate that to something you can configure at startup. If you look at the jQuery Mobile docs for configuring defaults, you see it mention how you can define a JavaScript file and load it before jQuery Mobile. They provide an example of setting values and even provide a list of things you can configure.

But none of these cover what I was looking for. So I went back to the page headers docs and noticed that further down in the documentation it talks about configuring the text for back buttons. It uses this syntax:

$.mobile.page.prototype.options.backBtnText = "previous";

With that in mind, I then tried the following:

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn=true; });

And voila - automatic back buttons. Unfortunately this doesn't seem to be documented anywhere. I took a quick look at the uncompressed, unmimified JavaScript and found...

$.mobile.page.prototype.options.backBtnText = "Back"; $.mobile.page.prototype.options.addBackBtn = false; $.mobile.page.prototype.options.backBtnTheme = null; $.mobile.page.prototype.options.headerTheme = "a"; $.mobile.page.prototype.options.footerTheme = "a"; $.mobile.page.prototype.options.contentTheme = null;

Hopefully the docs will soon have reference guides that list things like this in a more direct manner. (Or even better, maybe my book will have it! ;)

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments