如何设置jQuery Mobile 1.4响应面板的宽度百分比

我可以通过覆盖默认的JQM样式表来改变面板的固定宽度。但是现在，在我的移动UI中，我需要将固定面板的宽度设置为百分比值。

我找到了很多关于如何设置固定宽度的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 1.4的JQM文档中的描述进行初始化:

$("[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/

你可以去掉ui-responsive-panel类，然后重写panel的CSS，使其始终为50%:

设置面板为50%，我喜欢将z-index提高到解散层的上方(可选):

.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%;
}

<
更新strong>小提琴

相关内容

最新更新

热门标签：