I've been trying to get this to work for 4 days now, with no luck.
I have a very simple jquery mobile app. The app has a header, content and footer. The footer is being generated dynamically (footer.tpl), like same opencart footer template because it is always the same and I don't want to have its HTML in every page.
my footer.tpl code given below
div data-role="footer" data-position="fixed" data-theme="h">
It is up to you to set the .ui-btn-active class on the active button(s). The specifics depend on your own program logic. It is not a given that there is a single "active" button. You might have one, none, two, or any number. As such, jQuery Mobile can't do it for you.
You need to build whatever logic you need into your template.
I wrote a little one-line helper for the Middleman static site generator that lets me do something like this in a template. (It's a Slim template, BTW, similar to HAML, that's why the inside-out HTML syntax...)