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

Posted 2023-05-09

【中文标题】Jquery mobile 1.4.5 可以设置面板高度吗？

【英文标题】：Jquery mobile 1.4.5 set panel height possible?

【发布时间】：2015-06-01 22:16:09

【问题描述】：

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

我有两个面板，一组用来推动另一个是覆盖。一个在左上角，一个在右上角。

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

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

提前致谢！！

【参考方案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/

【讨论】：

这很好用。正是我想要的。然而，它在移动设备上有点不稳定（更多的按钮打开和关闭）。动画很好。我添加了 return false;到解决问题的代码。不确定这是否是 100% 的“规范”，而不是 preventDefault 和 stopPropagation。

@JASON FOREST (return false; ) 没问题。请您接受答案吗？

【参考方案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。两种方式都试过了，在移动设备上都非常流畅。

【参考方案3】：

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

由于您的高度值低于 100% 的最小高度值，因此没有效果。

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

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