如何设置百分比的jQuery Mobile 1.4响应面板的宽度? [英] How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?
问题描述
我可以通过覆盖默认的JQM样式表来更改面板的固定宽度.但是现在，在移动用户界面中，我需要将固定面板的宽度设置为百分比值.
我在关于如何将CSS设置为固定宽度以及带有显示面板的面板上有很多答案:"push"，但是在为CSS 3D动画找到这种样式后，我陷入了困境:
transform: translate3d(17em,0,0);
不接受(...至少到现在为止)父元素的百分比值.
现在，由于JavaScript变量尚未位于我的浏览器目标之内，因此我无法用javascript替换成功，而无法成功.
这是我的标记
<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-sensitive-panel类，然后覆盖面板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%;
}
更新了 FIDDLE
I'm able to change the fixed width of a panel, by overriding the default JQM stylesheet. But now, in my mobile UI, i need to set the width of my fixed panel to a percentage value.
I found on SO many answers about how to set the CSS for a fixed width, and as well as for a panel with display: "push", but i was stuck after finding this style for the CSS 3D animation:
transform: translate3d(17em,0,0);
which doesn't accept (...at least until now) percentage values of the parent element.
Now i'm stretching my hairs without success with a javascript replacement, moreover because the CSS variables are not yet inside my browser target.
This is my markup:
<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>
Header, footer and panel are outside the other mobile pages, and are initialized as described in the JQM documentation for JQM 1.4:
$("[data-role='header'], [data-role='footer']").toolbar({
theme: "a"
});
$("#nav-panel").panel({
theme: "b",
display: "push",
position: "right",
positionFixed: true
}).enhanceWithin();
Is there a way to have a responsive panel which is taking 50% of the available screen width?
FINAL RESULT: http://jsfiddle.net/e6Cnn/30/
UPDATE: if someone interested, after more test in mobile browsers, i came up with another solution: http://jsfiddle.net/e6Cnn/37/
You can get rid of the ui-responsive-panel class and then override the panel CSS to make it always 50%:
Make the panel 50% and I like to raise the z-index above the dismiss layer (optional):
.ui-panel {
width: 50%;
z-index: 1004;
}
When closed, set the right position to -50% and animate the full 100% width of the panel:
/* 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);
}
push the page content 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);
}
set the width of the dismiss div to 50%:
/* Dismiss model open */
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
right: 50%;
}
Updated FIDDLE
这篇关于如何设置百分比的jQuery Mobile 1.4响应面板的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
