2

我在 jQM 1.3.1 中有一个面板在页面上工作，但我需要增加它的宽度。我已经应用了这个 CSS：

.ui-pannel-inner {
    width: 25em;
}

这确实增加了“视觉上”的宽度，因此面板现在是“宽的”，但是框架创建了一个<div class="ui-panel-dismiss ui-panel-dismiss-position-right ui-panel-dismiss-display-push ui-panel-dismiss-open" data-panelid="PanelOptions"></div>其宽度显然是基于默认面板宽度定义的。这<div>用作关闭面板的“可点击”区域。通常，该区域将与面板未覆盖但实际上也覆盖面板的页面区域完全匹配。因此，（这是一个“右侧”面板）如果我在面板的左边缘附近单击（单击，比如说，一个单选按钮），我将单击 面板覆盖的区域<div class="ui-panel-dismiss...并关闭面板。也就是说，<div class="ui-panel-dismiss覆盖面板左侧的一部分。

我知道我可以添加data-dismissible="false"到 <div data-role="panel" ...标记以防止这种行为，但是我无法通过单击页面来关闭面板。

我已经尝试了@jQuery Mobile 面板宽度<div class="ui-panel-dismiss...提出的建议，它们都改变了“可见”面板宽度，但没有一个处理仍然与面板的额外宽度重叠的事实。

我如何“正确”改变面板的宽度，这样我就不必使用了-dismissible="false"？

谢谢你。

4

3 回答 3

1

我面临着与问题中提到的完全相同的问题。因此，在设置了面板的 with 之后，我使用下面的内容来覆盖面板的 css 属性，使其不会关闭。

.ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -20em!important;
right: 20em!important; }

默认设置为 left:-17em 和 right:17em。您可以根据设置的宽度增加值并检查面板是否正在关闭。

希望这可以帮助。

于 2014-01-03T07:17:44.617 回答
0

只需添加到您的头部：

  <style>
    .ui-panel-dismiss-open.ui-panel-dismiss-position-left { left: 356px !important }
  </style>

使用 jQuery Mobile 1.4.5 为我工作

于 2015-03-19T21:11:41.057 回答
0

您可以像这样通过覆盖 ui-panel-dismiss-position-left 来指向关闭面板的位置

 .ui-panel-dismiss-position-left{
     left: -240px;
     right: 240px;
 }

或者您可以在面板打开后动态修改位置。

见http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-styling.html#&ui-state=dialog

于 2013-05-10T02:54:28.007 回答