如何以百分比设置 jQuery Mobile 1.4 响应式面板的宽度?
How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?
我可以通过覆盖默认的 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();
有没有办法让响应式面板占据可用屏幕宽度的 50%?
最终结果: http://jsfiddle.net/e6Cnn/30/
更新:
如果有人感兴趣,在移动浏览器中进行更多测试后,我想出了另一个解决方案:http://jsfiddle.net/e6Cnn/37/
您可以摆脱 ui-responsive-panel class 然后覆盖面板 CSS 使其始终为 50%:
将面板设为 50%,我想将 z-index 提高到 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%;
}
Updated FIDDLE
我可以通过覆盖默认的 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();
有没有办法让响应式面板占据可用屏幕宽度的 50%?
最终结果: http://jsfiddle.net/e6Cnn/30/
更新: 如果有人感兴趣,在移动浏览器中进行更多测试后,我想出了另一个解决方案:http://jsfiddle.net/e6Cnn/37/
您可以摆脱 ui-responsive-panel class 然后覆盖面板 CSS 使其始终为 50%:
将面板设为 50%,我想将 z-index 提高到 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%;
}
Updated FIDDLE