jQuery mobile 1.4.5設置面板高度可能嗎？

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;
})

不確定返回false是否比preventDefault和stopPropagation好。 兩種方式都嘗試過，在移動設備上非常流暢。

Answer 3

jQueryMobile.css的.ui-panel CSS定義了min-height的min-height屬性min-height: 100%因此，您必須覆蓋min-height屬性。

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

就我而言，我想將面板設置在固定的標題欄下，因此我使用：

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