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

Posted

技术标签:

【中文标题】如何以百分比设置 jQuery Mobile 1.4 响应式面板的宽度?【英文标题】:How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage? 【发布时间】:2015-10-26 20:53:47 【问题描述】:

我可以通过覆盖默认的 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/

【问题讨论】:

【参考方案1】:

您可以去掉 ui-responsive-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);

将dismiss div的宽度设置为50%:

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

更新FIDDLE

【讨论】:

哇,但是我需要响应式风格,因为我在左侧有很多表单元素,你怎么看.ui-panel-wrapper.ui-panel-animate.ui-panel-page-content-position-right.ui-panel-page-content-display-push.ui-panel-page-content-open margin-left: 25% width: 50% 或者你还有一张王牌吗?跨度> @deblocker,如果您需要 ui-responsive-panel 类,您也可以在响应式媒体查询中覆盖相同的类。 顺便说一句,我必须更改的最后一件事是.ui-panel-page-content-position-right.ui-panel-page-content-display-push, .ui-panel-page-content-position-right.ui-panel-page-content-display-reveal margin-right: 0; ,因为它会导致奇怪的模糊文本副作用。 提高z-index有什么作用?你能解释一下吗? @deblocker,如果关闭面板的大小正确,则 z-index 无关紧要。我过去曾遇到过关闭面板与面板重叠的问题,并且因为它具有更高的 z-index,它会阻止对面板的访问。提高面板 z-index 消除了这种可能性。

以上是关于如何以百分比设置 jQuery Mobile 1.4 响应式面板的宽度?的主要内容,如果未能解决你的问题,请参考以下文章

添加项目并“刷新”脚本以设置样式时,Jquery Mobile 复选框列表不会更新

JQuery Mobile 默认数据主题

Worklight - 带有 jquery 1.10.2 的 jquery mobile 1.3.1 - TypeError: $.mobile 未定义

如何使用 OnClick 事件设置 Jquery Mobile 导航

如何在焦点()上以编程方式隐藏jquery mobile中的键盘

JQuery Mobile:拉动以刷新列表视图[重复]