使用多个不同大小的面板更改面板关闭大小

Question

我在自己编写的 Web 应用程序中使用了五个面板。由于包含的信息量，其中一个面板需要稍微大一些。

但是，单击靠近边缘的位置会关闭面板。我知道我可以改变 ui-panel-dismiss class 上的宽度和起点，但我怎么能只为那个面板做这件事。我看不出那个和另一个面板之间有任何区别 classes。而且我不想在其他面板上有差距。我能想到的唯一方法是使用 jquery 以编程方式更改面板宽度。

有更好的方法吗？

<div id="panel2" data-role="panel" data-position="right" data-display="overlay">
    <a href= "#" data-rel="close" data-role="button">Close</a>
     <div id="colourChange"></div>    
</div>

css: 
#panel2 {
    width: 25em;    
}

编辑： 添加了 JSfiddle 来说明我的意思。 http://jsfiddle.net/awm1475a/

点击面板 2 中的蓝色 div 应该触发颜色变化而不是关闭面板

Answer 1

这里有一个快速技巧可以帮助您解决这个问题。只需将 panel2 z-index 提高到高于 dismiss div。默认情况下，面板的 z-index 为 1001，dismiss div 为 1002.

#panel2 {
    width: 25em;  
    z-index: 1003;
}

Updated FIDDLE

Answer 2

这是因为可关闭的叠加层与面板重叠。单击该叠加层会关闭面板。因此，您需要像调整面板本身一样调整其宽度。

快速解决方法是使用 panelopen to add new width to that overlay. Check this working fiddle。

$(document).on("panelopen", ".ui-panel", function () {
    var panel = $(this).width(),
        screen = $(window).width(),
        width = screen - panel;
    $(".ui-panel-dismiss").width(width);
});

使用多个不同大小的面板更改面板关闭大小

Altering panel dismiss size with multiple different sized panels

css

jquery

jquery-mobile