如何改变 jQuery Mobile 面板的宽度答案

【问题标题】：How alter width of jQuery Mobile Panel如何改变 jQuery Mobile 面板的宽度
【发布时间】：2013-04-22 12:18:00
【问题描述】：

我在 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 panel width 提出的建议，它们都确实改变了“可见”面板的宽度，但都没有处理<div class="ui-panel-dismiss... 仍然与面板的额外宽度重叠的事实。

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

谢谢。

【问题讨论】：

标签： jquery-mobile panel

【解决方案1】：

您可以像这样通过覆盖 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

【讨论】：

【解决方案2】：

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

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

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

希望这会有所帮助。

【讨论】：

对于其他想知道为什么 1.4.5 演示中的示例代码无法按预期工作的人，有必要添加 !important 以覆盖框架默认值。

【解决方案3】：

只需添加到您的头部：

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

使用 jQuery Mobile 1.4.5 为我工作

【讨论】：