Question

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

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

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

我知道我可以将data-dismissible="false"添加到＆lt; div data-role="panel" ...标记以防止此行为，但之后我无法通过单击页面关闭Panel。

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

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

谢谢。

Answer 1

我面临的问题与问题中提到的完全相同。所以在设置了面板后，我使用下面的方法来覆盖面板的css属性，使它不会关闭。

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

默认设置为左：-17em和右：17em。您可以根据设置的宽度增加值，并检查Panel是否正在关闭。

希望这有帮助。

Answer 2

你可以通过覆盖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

Answer 3

只需添加到您的头部：

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

使用jQuery Mobile 1.4.5为我工作

如何改变jQuery Mobile Panel的宽度

3 个答案: