Question

我在某些页面的右侧使用了JQuery Mobile 1.4.5外部面板，并且页面也有类ui-responsive-panel，因此主要内容根据面板宽度调整大小以显示它的全部内容。

该面板还有data-dismissible =“false”，因为主要内容是面板打开时的一些表单控件和用户交互。

面板通过“揭示”动画显示自己，这会导致页面主要内容首先滑到页面的最左侧，然后调整为剩余的页面宽度。

<div data-role="panel" data-position="right" data-position-fixed="true" data-display="reveal" data-dismissible="false">
</div>

这是用于自定义JQM右侧面板的CSS：

.ui-panel {
    width: 25em;
}
.ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right {
    margin-left: 25em;
}
.ui-panel-page-content-position-right,
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    left: 0;
    right: -25em;
}
.ui-panel-animate.ui-panel-page-content-position-right.ui-panel-page-content-display-reveal {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(-25em,0,0);
    -moz-transform: translate3d(-25em,0,0);
    transform: translate3d(-25em,0,0);
}

是否有一种简单的方法可以避免页面最左侧主要部分的初始左侧滑动，而是让主要内容在面板期间从右侧平滑地减小的大小动画？

Answer 1

以下是使用jQuery animate（）方法的可能解决方案。让它足以使页面内容响应，因为整页动画（包括工具栏）不是必需的：

$(".ui-panel").on("panelbeforeopen", function (event, ui) {
    $(".ui-page-active .ui-content").animate({
        "margin-right": "50%"
    }, 300,"swing");
});

$(".ui-panel").on("panelbeforeclose", function (event, ui) {
    $(".ui-page-active .ui-content").animate({
        "margin-right": "0%"
    }, 300,"swing",function()
                    {
                        $(this).removeAttr("style");
                    });
});

此外，当与面板一起使用 data-display =＆＃34; overlay＆＃34; 类＆＃34; ui-responsive-panel＆＃34;在身体中不再需要并且可以被丢弃，因为面板高度可以很容易地适应仅填充页面内容高度（信用：jQuery mobile panel between header and footer）。

function scalePanelToContent() {
    var screenH = $.mobile.getScreenHeight();
    var headerH = $(".ui-header").outerHeight() - 1;
    var footerH = $(".ui-footer").outerHeight() - 1;
    var panelH = screenH - headerH - footerH;
    $(".ui-panel").css({
      "top": headerH,
      "bottom": footerH,
      "min-height": panelH
    });
}

通过添加"bottom": footerH，在调整浏览器窗口大小时，Panel可以很好地填充整页内容高度。

面板：使用jQuery实际用于过渡和动画支持的相同标准，使用最少的更改来调整CSS面板动画：

.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay {
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
}

从用户体验的角度来看，最终结果非常接近于使用带数据显示的面板=＆＃34;推送＆＃34;或数据显示=＆＃34;揭示＆＃34;在Panel响应页面中：一个漂亮的平滑动画 - 而且没有每个JQM页面上的面板包装器的开销，并且页眉和页脚工具栏始终以全宽度可用而不缩小。

完整演示：http://jsfiddle.net/e6Cnn/38/

JQuery Mobile 1.4.5右侧面板动画

1 个答案: