Как установить ширину отзывчивой панели jQuery Mobile 1.4 в процентах?

Я могу изменить фиксированную ширину панели, переопределив таблицу стилей JQM по умолчанию. Но теперь, в моем мобильном интерфейсе, мне нужно установить ширину фиксированной панели в процентах.

На SO я нашел много ответов о том, как установить CSS для фиксированной ширины, а также для панели с дисплеем: "push", но я застрял после нахождения этого стиля для CSS 3D-анимации:

transform: translate3d(17em,0,0);

который не принимает (... по крайней мере до сих пор) процентные значения родительского элемента.

Теперь я безуспешно растягиваю волосы заменой javascript, более того, потому что переменные CSS еще не находятся внутри цели браузера.

Это моя разметка:

<body class="ui-responsive-panel">
    <div data-role="header">
         <h1>Header</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div>
    <div data-role="footer">
         <h4>Footer</h4>
    </div>
    <div data-role="page" id="home">
        <div data-role="content" class="ui-content">
            <p>pPage content</p>
        </div>
    </div>
    <div data-role="panel" id="nav-panel">
        <p>Panel content</p>
    </div>
</body>

Заголовок, нижний колонтитул и панель находятся за пределами других мобильных страниц и инициализируются, как описано в документации JQM для JQM 1.4:

$("[data-role='header'], [data-role='footer']").toolbar({
    theme: "a"
});

$("#nav-panel").panel({
    theme: "b",
    display: "push",
    position: "right",
    positionFixed: true
}).enhanceWithin();

http://jsfiddle.net/e6Cnn/25/

Есть ли способ получить адаптивную панель, которая занимает 50% доступной ширины экрана?

ЗАКЛЮЧИТЕЛЬНЫЙ РЕЗУЛЬТАТ: http://jsfiddle.net/e6Cnn/30/

ОБНОВЛЕНИЕ: если кому-то интересно, после дополнительных тестов в мобильных браузерах я нашел другое решение: http://jsfiddle.net/e6Cnn/37/

Источник

1 ответ

Решение

Вы можете избавиться от класса ui-responseive-panel и затем переопределить CSS панели, чтобы он всегда составлял 50%:

Сделайте панель на 50%, и мне нравится поднимать z-индекс над слоем dismiss (необязательно):

.ui-panel {
    width: 50%;
    z-index: 1004;
}

В закрытом положении установите правильное положение на -50% и анимируйте всю 100% ширину панели:

/* Panel right closed */
.ui-panel-position-right {
    right: -50%;
}
/* Panel right closed animated */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
    right: 0;
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

нажмите на содержание страницы 50%:

/* Panel right open */
.ui-panel-page-content-position-right {
    left: -50%;
    right: 50%;
}
/* Panel right open animated */
.ui-panel-animate.ui-panel-page-content-position-right {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(-50%,0,0);
    -moz-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
}

установите ширину отклонения div на 50%:

/* Dismiss model open */
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    right: 50%;
}

Обновлена FIDDLE

Источник
Другие вопросы по тегам