different background images and left-panel bug

问题

I'm using jQuery mobile 1.4 and if I click on the left panel, my background disappears. I solved this bug with help of Omar (thanks a lot).

Aim:

homePage should has a dark background
all other pages should have a light background

Problem 1:

If I click on panel on homePage, it works.
If I go to contactPage and click on panel, the background changes

Problem 2:

If I go to contactPage, open panel, close panel and go back to homePage - I can not open the panel

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

Code:

<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;
}

回答1:

If you're using the same panel for all pages, I do recommend using external panel instead of adding the same markup to each and every page.

External panel is placed outside page div and can be called on every page. You only need to initialize it one time and enhance contents inside it.

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

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

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

Initialize external panel:

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

Add class .bg-dark to homepage, and .bg-light to other pages and use CSS below.

/* 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

回答2:

Check out this fiddle where both your problems should be fixed: http://jsfiddle.net/ULuvu/2/

Problem 1:
I fixed this issue with adding #contactPage .ui-panel-wrapper and #homePage .ui-panel-wrapper to the CSS.

Problem 2:
It seemed the problem was caused by the duplicate ID id="nav-panel". I renamed the one on the homepage to "nav-panel-homepage". Now it works fine.

来源：https://stackoverflow.com/questions/20941065/different-background-images-and-left-panel-bug

标签

javascript

jquery

html

css

jquery-mobile