jquery-mobilejquery-mobile-buttonipad-mini

jQuery Mobile best practice - panel button, back button, or both


I'm creating a mobile app targeted for iPad Mini. I have a panel that slides out from the left with navigation menu. I also have the need for a back button in the header. What is the best practice for buttons in the header? I need a back button at certain times in the flow of the application and I also need the button that opens the panel in the header too.

Thanks for your advice.

I forgot to mention the right side of header has a button that loads barcode scanner. So, I'm left with left side of header to compete for 2 buttons.


Solution

  • Header can accommodate two buttons on right and left, ui-btn-left and ui-btn-right respectively.

    However, you can place more than two buttons in header by using controlgroup widget with data-type="horizontal" attribute.

    <div data-role="header">
        <!-- right-hand button -->
        <a href="#" class="ui-btn-right" data-icon="bars">Bcode</a>
    
        <!-- if you don't want to use title,
        replace it with <span class="ui-title"></span> -->
        <h1>Header</h1>
    
        <!-- left-hand button -->
        <div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
            <a href="#panel" data-role="button" data-icon="star">Panel</a>
            <a href="#" data-role="button" data-icon="back">Back</a>
        </div>
    </div>
    

    Demo jQM <= 1.3

    Demo jQM >= 1.4