Question

我正在使用jQuery mobile 1.4，如果我点击左侧面板，我的背景就会消失。我在奥马尔的帮助下解决了这个问题（非常感谢）。

目的：

homePage应该有一个黑暗的背景
所有其他页面应具有浅色背景

问题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

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

外部面板位于 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

Answer 2

查看这个小提琴，你的问题应该修复：http://jsfiddle.net/ULuvu/2/

问题1：
我通过向CSS添加#contactPage .ui-panel-wrapper和#homePage .ui-panel-wrapper来解决了这个问题。

问题2：
似乎问题是由重复的ID id="nav-panel"引起的。我将主页上的那个重命名为“nav-panel-homepage”。现在它工作正常。

不同的背景图像和左面板的bug

2 个答案: