2 headers in app

[Stefan]

Hi,

I'm trying to build an app that has a listview to show some categories of information. It has a basic layout like this.

<section data-role="layout" data-id="default" data-platform="ios">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-role="backbutton" data-align="left">Back</a>
        </div>
    </header>
    <!--View content will render here-->
    <footer data-role="footer">
        <div data-role="tabstrip">

            <a data-role="button" data-icon="organize" ref="">Secrets</a>
            <a data-role="button" data-icon="compose" href="">Place a secret</a>
            <a data-role="button" data-icon="contacts" href="">Profile</a>
        </div>
    </footer>
</section>

The problem is I want to add a buttongroup to the header so that its possible to select between two modes for this application, one button has show categories and the other button show everything. If i try to add a buttongroup to the header, the buttons overlap the title and it looks bad. Ideal I want to have a second header under the navbar that has the buttongroup. Is this possible and how?

Kind Regards,
Stefan

[Pavel Kolev]

Hi Stefan,

If you are using Kendo UI Mobile you can benefit from TabStrip. If you are using jQuery Mobile for your project you can try the Navbar. Both works great when combined with additional header of footer.

Regards,
Pavel Kolev
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Stefan]

Thank you,. That was exactly what I needed.