Question

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]

Answer 1

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>