Question

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

然而，靠近边缘点击会使面板失效。我知道我可以改变ui-panel-dismiss类的宽度和起始点但是我怎么能只为那个面板做这个。我看不出那个和其他小组之间有任何区别对待。我不想在其他面板上留下任何差距。我能想到的唯一方法就是使用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;
}

更新了 FIDDLE

Answer 2

这是因为与面板重叠的不允许覆盖。单击时，该叠加层会关闭面板。因此，您需要像对面板本身一样调整宽度。

快速解决方法是使用panelopen为该叠加添加新宽度。请检查此working fiddle。

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

使用多个不同尺寸的面板更改面板关闭尺寸

2 个答案: