I have seen documentation on the JQueryMobile site that shows you how to group links in the header/footer together. I have also seen documents that allow you to place links specifically in the space to the left and/or right of the heading tag. I have NOT seen any documents on how to merge them
Basically what I want is
<div data-role="header">
<a href="#" data-icon="gear">left 1</a>
<a href="#" data-icon="gear">left 2</a>
<h1>Page Title</h1>
<a href="#" data-icon="gear">right 1</a>
<a href="#" data-icon="gear">right 2</a>
<a href="#" data-icon="gear">right 3</a>
</div>
and for that to appear as
[left 1][left 2] Page Title [right 1][right 2][right 3]
I have tried wrapping the links in a div and using floats (adding the class(s) ui-btn-left/right also appears to work), however the anchor tags remain as-is and the styles defined by the framework are never applied (All I see is regular links, no fancy buttons)
Can someone please tell me if I'm missing an attribute? or if there is a container class that I can use that will not block the buttons from having their new markup applied?
Edit: The above code will currently output
[left 1] Page Title [left 2]
[right 1][right 2][right 3]
Solution:
Use a wrapping container to fix the position left or right aligned (I am using the class ui-btn-[left/right]) then force the link to take the markup with data-role="button"
So it looks like
<div data-role="header">
<div class="ui-btn-left">
<a href="#" data-role="button" data-icon="gear">left 1</a>
<a href="#" data-role="button" data-icon="gear">left 2</a>
</div>
<h1>Page Title</h1>
<div class="ui-btn-right">
<a href="#" data-role="button" data-icon="gear">right 1</a>
<a href="#" data-role="button" data-icon="gear">right 2</a>
<a href="#" data-role="button" data-icon="gear">right 3</a>
</div>
</div>