In jQuery Mobile, how do I prevent a link becoming a button in the header or footer?

Question

I'm trying to implement the new jQuery Mobile Alpha 2. Currently, any link within data-role="header" or data-role="footer" becomes a button. Is there a way to disable that?

Answer 1

The new version of jQuery Mobile (1.3pre) has fixed this issue. From the manual:

"If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container div inside the header container and the plugin won't apply the automatic button logic so you can write custom styles for laying out the content in your header."

If you grab the source from github it will work.

Answer 2

Another solution is to use a data-role="none" attribute:

<div data-role="header">
  <a href="somewhere" data-role="none">Not a jQM button</a>
</div>

Answer 3

Example based on answer by @gleitz:

<div  data-theme="a" data-role="header" data-position="fixed">
      <div> <!-- new bit -->
          <a href='nextpageetc.php'>Not a button </a>
      </div> <!-- new bit -->
</div>

Answer 4

I'm not aware of any direct option to do it in HTML, but I admit - I didn't search for it much.

You can get the desired effect in one of those ways:

1. remove a css class button and/or other needed
2. don't add them in html - insert them links when DOM is ready and they will not be changed to buttons.

The first method is better, because it degrades for browsers with bad JS support.

Answer 5

I'm wondering too! I've tried adding rel="external" to the link, but this seems to be ignored for headers an footers.

@naugtur: I'm refreshing it with ajax now. thanks for the tip. But I still hope this issue gets fixed for the next release (can't wait; I'm already using a package from the development branch :D ).

@update: https://github.com/jquery/jquery-mobile/issues/issue/714 (I accidentally closed the ticket and couldn't reopen it again -_-)