javascript - 不同的背景图片和左面板错误

Question

我使用的是 jQuery Mobile 1.4，如果我点击左侧面板，我的背景就会消失。我在 Omar 的帮助下解决了这个错误(非常感谢)。

目标:

• 主页应该有深色背景
• 所有其他页面应该有浅色背景

问题 1:

• 如果我点击主页上的面板，它会起作用。
• 如果我转到 contactPage 并单击面板，背景会发生变化

问题 2:

• 如果我转到联系人页面，打开面板，关闭面板并返回主页 - 我无法打开面板

---

JSFiddle: http://jsfiddle.net/ULuvu/1/

代码:

<div data-role="page" id="homePage" class="bg-dark">
    <div id="nav-panel" data-role="panel">
        <a href="#my-header" data-rel="close" class="ui-btn">Close panel</a>
    </div>
    <div data-role="content">
        <h3>homePage - DARK BACKGROUND</h3>
        <a href= "#nav-panel" data-role="button">Open Panel</a>
        <a href= "#contactPage" data-role="button">Contact</a>
    </div>
</div>

<div data-role="page" id="contactPage">
    <div id="nav-panel" data-role="panel">
        <a href="#my-header" data-rel="close" class="ui-btn">Close panel</a>
    </div>
    <div data-role="content">
        <h3>CONTACT - LIGHT BACKGROUND</h3>
        <a href= "#nav-panel" data-role="button">Open Panel</a>
        <a href= "#homePage" data-role="button">back</a>
    </div>
</div>

---

CSS

/* LIGHT BACKGROUND */
[data-role=page], .ui-panel-wrapper {
    background-image: url(http://bglabs.evade.netdna-cdn.com/wp-content/uploads/2013/05/stylish-floral-pattern.png) !important;
    background-repeat: repeat;
}

/* DARK BACKGROUND only homePage */
.bg-dark, .ui-panel-wrapper {
    background-image: url(http://bglabs.evade.netdna-cdn.com/wp-content/uploads/2013/04/black-mosaic-tiles.png) !important;
    background-repeat: repeat;
    color: #ffffff;
    font-weight: bold;
}

Answer 1

如果您为所有页面使用相同的面板，我建议您使用外部面板，而不是为每个页面添加相同的标记。

External panel 放置在page div 之外，可以在每个页面上调用。您只需对其进行一次初始化并增强其中的内容。

<!-- external panel -->
<div data-role="panel">
  <!-- contents -->
</div>

<!-- pages -->
<div data-role="page">
  <!-- contents -->
</div>

<div data-role="page">
  <!-- contents -->
</div>

初始化外部面板:

$(function () {
  $("[data-role=panel]").panel().enhanceWithin();
});

在主页添加类.bg-dark，在其他页面添加类.bg-light并使用下面的CSS。

/* LIGHT BACKGROUND */
.bg-light, .bg-light .ui-panel-wrapper {
  background-image: url(light.png) !important;
  background-repeat: repeat;
}
/* DARK BACKGROUND only homePage */
.bg-dark, .bg-dark .ui-panel-wrapper {
 background-image: url(dark.png) !important;
 background-repeat: repeat;
 color: #ffffff;
 font-weight: bold;
}

Demo