Menu grid in jQuery Mobile

Question

What is the best way to implement this layout using jQuery Mobile (grid menu, 6 buttons in this example)?

I tried the jQuery mobile grid, but I had a lot of problems, such as creating full width and full height, as well as changing the color to whatever I want.

Answer 1

You can create it in your own style for this page. Place the icons and give them a width of 50% (or less if you use box borders)

Answer 2

Since you don't have much time for what is needed, you need a body here, I feel that the title navigation path may be the easiest. Just put the following code right after your page title. For instance,

<div data-role='header' data-position='inline' role='banner' data-theme='f' > <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1> <div data-role="navbar" data-theme='c'> <ul> <li><a href="" > Camera </a></li> <li><a href="" > Wave </a></li> <li><a href="" > Lock </a></li> <li><a href="" > Pencil </a></li> <li><a href="" > Star </a></li> <li><a href="" > Friends </a></li> </ul> </div><!-- /navbar --> </div><!-- header --> 

Since you have six elements, jquery mobile will automatically display them in a 2x3 grid, as shown in the layout (at least take care of the width). Other than that, your best bet for height might do some arithmetic in css. For example: if the title bar is 12px, then set each block height: 33% -4px;

For color settings, etc. jquery mobile theme roller works much better than doing css manually.

Answer 3

Use data grid "a"

Use below

  <div data-role="navbar" data-grid="a">