Question

我正在制作一个jqm项目移动版。

我有两个面板一套推另一个是叠加。一个在左角，另一个在右上角。

我的问题是可以将右侧面板设置为100％宽度（我已经完成）并将高度设置为10-20％（40px-50px）。

这可以在不破坏任何功能的情况下完成吗？可以在Css中完成吗？我可以设置宽度，但无法设置高度。

提前致谢!!

Answer 1

自定义右侧或左侧面板，您需要更改JQM设置的3个CSS类。面板的动画，面板和内部部分是内容。更简单的方法是创建自定义覆盖框。

<强>演示 https://jsfiddle.net/bz649m86/

<强> HTML

<div class="box"><a class="close">Close</a></div>

<强> CSS

.box {
    position:fixed; // a fixed position is used for the box
    top:0; // placed at the top of the screen
    right:-100%; // with a minus position setting on the right side of the screen so its hidden from view
    background-color: blue;
    width: 100%; //with a width of the whole screen, but it can be any width
    display: block; //displayed in block format
    z-index: 999999; // above the header when in view
    overflow: hidden; // if you don't require scrolling within the box
    height:40px; // the height size required
//the transition settings are not needed but makes the animation of the panel much smoother.
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

Jquery

// animate on click to bring the box in to view
    $(document).on("click", ".pannel", function () {
        $('.box').animate({
            'right': "0%"
        }, 300);
    })
// and out of view when closed    
    $(document).on("click", ".close", function () {
        $('.box').animate({
            'right': "-100%"
        }, 300);
    })

作为旁注，使用此方法，您可以在屏幕上的任何位置显示自定义面板（重叠）。

在此演示中，该框来自屏幕顶部

https://jsfiddle.net/Lqxp2ewb/

Answer 2

如上所述：

$(document).on("click", ".pannel", function () {
    $('.box').animate({
        'top': "0%"
    }, 200);
 return false;
})

$(document).on("click", ".close", function () {
    $('.box').animate({
        'top': "-100%"
    }, 200);
    return false;
})

不确定return false是否优于preventDefault和stopPropagation。无论哪种方式，都尝试在移动设备上非常流畅。

Answer 3

jQueryMobile.css中的.ui-panel CSS定义了一个min-height属性min-height: 100% 所以你必须覆盖min-height属性。

由于您的身高值低于最小身高值100％，因此无效。

在我的情况下，我想将面板设置在固定的标题栏下，所以我使用：

top: 38.4px;
min-height: calc(100% - 38.4px);

Jquery mobile 1.4.5设置面板高度可能吗？

3 个答案: