不同的背景图像和左面板错误 [英] different background images and left-panel bug

问题描述

我使用jQuery mobile 1.4，如果我点击左面板，我的背景消失。我解决了这个错误与奥马尔的帮助（感谢很多）。

目标：

• homePage深色背景


• 所有其他网页都应有浅色背景。

问题1：

• 如果我点击homePage上的面板，它会正常工作。


• 转到contactPage并单击面板，背景更改

问题2：
$ b

• 如果我访问contactPage，打开面板，关闭面板并返回homePage - 我无法打开面板

---

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

代码：

 < div data-role =pageid =homePageclass =bg-dark 
< div id =nav-paneldata-role =panel> 
< a href =＃my-headerdata-rel =closeclass =ui-btn>关闭面板< / a& 
< / div> 
< div data-role =content> 
< h3>首页 -  DARK背景< / h3> 
< a href =＃nav-paneldata-role =button>打开面板< / a> 
< a href =#contactPagedata-role =button>联系人< / a> 
< / div> 
< / div> 
 
< div data-role =pageid =contactPage> 
< div id =nav-paneldata-role =panel> 
< a href =＃my-headerdata-rel =closeclass =ui-btn>关闭面板< / a& 
< / div> 
< div data-role =content> 
< h3> CONTACT  -  LIGHT背景< / h3> 
< a href =＃nav-paneldata-role =button>打开面板< / a> 
< a href =#homePagedata-role =button>回< / a> 
< / div> 
< / div> 
 

---

CSS p>

  / * 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背景只有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; 
} 
  

解决方案

同样的面板，我建议使用外部面板，而不是在每一页添加相同的标记。

外部面板位于页 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（）。enhancementWithin（）; 
} ）; 
  

将类 .bg-dark 添加到首页和 .bg-light 到其他页面并使用下面的CSS。

  / * LIGHT Background * / 
 .bg-light，.bg-light .ui-panel-wrapper {
 background-image：url（light.png）！important ; 
 background-repeat：repeat; 
} 
 / * DARK背景只有homePage * / 
 .bg-dark，.bg-dark .ui-panel-wrapper {
 background-image：url ）！important; 
 background-repeat：repeat; 
 color：#ffffff; 
 font-weight：bold; 
} 
  

演示

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

解决方案

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

这篇关于不同的背景图像和左面板错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！