Dashboard Navigation with jQuery Mobile

Question

I want to implement a Dashboard-style navigation in a mobile web application using jQuery Mobile: http://mobile-patterns.com/dashboard-navigation

Are there any useful templates or good approaches to do so? Of course, I could build a grid-based content page, containing the icons and links. But thanks to the popularity of dashboard navigations, I'm looking forward for an easier solution.

Thanks in advance

Answer 1

This article talks about making custom icons for use in jquery mobile. I would follow that for creating my icons, and then refer to jqmobile's navbar documentation for instructions on how to build a 3 x 3 column list:

<div data-role="navbar">
    <ul>
        <li><a href="a.html" class="ui-btn-active">One</a></li>
        <li><a href="a.html" class="ui-btn-active">Two</a></li>
        <li><a href="a.html" class="ui-btn-active">Three</a></li>
    </ul>
</div>

Then further down in that same article is a, Using 3rd party icon sets section that will explain how to add in your icons. Since you won't want the default box behind your icons, you could add another css class to your container div where you can override jquerymobile's "navbar" class and hide the box:

<div data-role="navbar hidebox">

Note: When I'm working with jquery mobile, I import my own custom stylesheet after the jquerymobile css import. This lets me override classes that jquery mobile injects in to my code. This is where I'd override 'hidebox' class.

Also, this may help with building a 3 x 3 squared grid, since this developer was doing something similar (I know, the developer is using Sencha Touch but the discussions around it may help).