различные фоновые изображения и левая панель ошибка

Я использую jQuery mobile 1.4, и если я нажму на левую панель, мой фон исчезнет. Я решил эту ошибку с помощью Омара (спасибо большое).различные фоновые изображения и левая панель ошибка

Цель:

ГЛАВНОЙ СТРАНИЦЕ должен имеет темный фон
все остальные страницы должны иметь светлый фон

Проблема 1:

If I нажмите на панель на ho mePage, он работает.
Если я иду в contactPage и нажмите на панели, фон меняется

Задача 2:

Если я иду в contactPage, откройте панель, закройте панель и вернуться на главную страницу - Я не могу открыть панель

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

источник

2014-01-06 Struct

Если вы используете один и тот же панель для всех страниц, я рекомендую использовать внешнюю панель вместо добавления ту же разметку для каждой страницы.

Внешняя панель размещена за пределами страница div и может быть вызвана на каждой странице. Вам нужно только инициализировать его один раз и улучшить содержимое внутри него.

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

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

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

Initialize внешняя панель:

$(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

источник

2014-01-06 08:45:58 Omar

Привет Омар, внешняя панель, это хорошая идея. Есть одна небольшая проблема. Я обновил JSFiddle: http://jsfiddle.net/6BrSC/3/. Если вы откроете панель, нажмите на контакт и снова нажмите на контакт, панель должна закрыть, но она остается открытой. Вы знаете, как это исправить? – Struct

@ Подумайте, что вы вызываете одну и ту же страницу, поэтому она остается открытой. Если вы не закрыли его, проверьте href нажатого якоря, если он равен активной странице, закройте его. '$ .mobile.pageContainer.pagecontainer ("getActivePage");'. И панель '$ (" # panel "). Panel (" close ");'. – Omar

Возможно ли, что вы обновили свой JSFiddle в этом случае? :) В противном случае спасибо за помощь. – Struct

проверить эту скрипку, где обе ваши проблемы должны быть исправлены: http://jsfiddle.net/ULuvu/2/

Задача 1:
Я исправил эту проблему с добавлением #contactPage .ui-panel-wrapper и #homePage .ui-panel-wrapper в CSS.

Задача 2:
Казалось проблема была вызвана дубликата ID id="nav-panel". Я переименовал его на главной странице на «nav-panel-homepage». Теперь он работает нормально.

источник

2014-01-06 01:35:15

различные фоновые изображения и левая панель ошибка

ответ

Смежные вопросы