Сетка меню в jQuery Mobile

Question

Как лучше всего реализовать этот макет с помощью jQuery Mobile (сетка меню, 6 кнопок в этом примере)?

Я пробовал сетку jQuery Mobile, но у меня было много проблем, таких как создание полной ширины и полной высоты, а также изменение цвета на любое другое.

Answer 1

Поскольку у вас не так много работы, для которой необходимо тело, я чувствую, что путь навигации заголовка может быть самым простым. Просто поместите следующий код сразу после заголовка вашей страницы. Например:

<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 -->

Поскольку у вас есть шесть элементов, jquery mobile автоматически выровняет их в виде сетки 2x3, как показано в вашем макете (по крайней мере, позаботится о ширине). Помимо этого, ваша лучшая ставка на рост может быть делать некоторые арифметические действия в CSS. Например: если строка заголовка 12px, то установите высоту каждого блока: 33% -4px;

Для настройки цвета и тому подобного ролик с jquery mobile работает лучше, чем ручная работа css.

Answer 2

Использовать сетку данных "a"

Использовать приведенную ниже

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

Answer 3

Вы можете создать это в своем собственном стиле для этой страницы. Плавающие значки и дать им 50% ширины (или меньше, если вы используете границы с блочной моделью)