Фоновое изображение страницы перемещается и растягивается с помощью складного набора в jQuery mobile 1.4.0

У меня есть складной набор в моем мобильном приложении jQuery, проблема в том, что когда я добавляю фоновое изображение для страницы по мере расширения, закрываю складное изображение, фоновое изображение растягивается и перемещается с помощью складных элементов. Когда я удалил эти строки из моего css:

background-repeat: no-repeat; 
background-size: 100% 100%;

эта проблема решена, но это вызвало еще одну большую проблему, которая заключается в том, что когда я разворачиваю складной элемент, а затем закрываю его, фон сжимается «перемещается вверх вместе со сворачивающимся», а часть страницы под этим складным становится без фона «прозрачным». происходит на мобильных устройствах больше, чем jsFiddle, это мой jsfiddle

Пожалуйста, помогите мне, как я могу решить эту проблему. Чтобы складные элементы можно было разворачивать и закрывать, не затрагивая фоновое изображение страницы?


background-image jquery-mobile jquery-mobile-collapsible
person user    schedule 27.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете изменить размер своего контента в соответствии с размером устройства с помощью javascript: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

Обновлен FIDDLE.

$(document).on("pageshow", function(){
    SizeContent();
});
$(window).on("resize orientationchange", function(){
    SizeContent();
});

function SizeContent(){
    var screen = $.mobile.getScreenHeight();
    //if you have a page header
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    //if you have a page footer
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

    /* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;

    $(".ui-content").height(content);   
}
person ezanker    schedule 27.02.2014
comment
@ezanker Большое спасибо, это решило проблему, но возникла странная проблема, из-за которой иногда не всегда мне нужно много раз нажимать на третью складную губернаторство 3, чтобы развернуться, и если есть другая складная развернутая, эта третья складная не закрывается! - person user; 28.02.2014
comment
это происходит только с разборным №3! - person user; 28.02.2014
comment
я не могу воспроизвести такое поведение... если на операцию будет дан ответ, примите его. - person ezanker; 28.02.2014
comment
@ezankerЭто произошло на мобильном телефоне, и иногда не всегда, я просмотрел код, но это все еще происходит :(, Конечно, я приму и +1 - person user; 28.02.2014
comment
Спасибо. Я не вижу ничего явно плохого в коде. - person ezanker; 28.02.2014
comment
mmmStrange, пожалуйста, это минимум, что я могу сделать :) - person user; 28.02.2014
comment
@ezankerЯ добавил фоновое изображение на страницу, которая содержит только представление списка, и по мере того, как элемент списка становится больше, поскольку фон также растягивается, я должен сделать то же самое и для этой страницы? - person user; 28.02.2014
comment
Наверное. Поскольку вы настроили изображение на увеличение/уменьшение по мере изменения размера страницы, установка размера сохраняет страницу того же размера и вместо этого добавляет полосу прокрутки в div содержимого. - person ezanker; 28.02.2014
comment
@ezankerЯ пробовал ту же концепцию использования SizeContent() на моей странице, которая содержит представление alist, и это решает проблему, когда фон становится не растягивающимся, поскольку элемент списка становится больше, но это вызывает большую проблему в версии Android 2.3.6, содержимое становится вообще не прокручивается Я не могу прокручивать список и переполняться: авто не работает на андроиде ниже версии 4.x Пожалуйста, как я могу решить эту проблему? - person user; 28.02.2014
comment
@ezankerРазмер контента — единственное возможное решение для предотвращения растяжения фона Страницы? Или мы можем решить эту проблему по-другому? - person user; 28.02.2014
comment
Если ваше фоновое изображение представляет собой повторяющийся узор, лучшее решение — создать плитку и повторять ее на фоне, а не растягивать. - person ezanker; 28.02.2014
comment
@ezankerNo это не повторение, и я использую background-repeat: no-repeat; в моем CSS, чтобы он не повторялся - person user; 28.02.2014
comment
@ezankerЧто мы можем сделать Теперь, чтобы решить эту проблему, для меня очень важно решить ее Пожалуйста, мне очень нужна ваша помощь .. - person user; 28.02.2014
comment
а также overflow: auto, попробуйте -webkit-overflow-scrolling: touch; если это не сработает, вы должны опубликовать новый вопрос и посмотреть, сталкивался ли кто-нибудь еще с этой проблемой. - person ezanker; 28.02.2014
comment
@ezankerЯ тоже пробовал, и это не работало на версии Android ниже 4.x :( - person user; 28.02.2014
comment
@ezankerТак что единственное возможное решение для предотвращения растяжения фона страницы — это прокручивать только содержимое ?? - person user; 28.02.2014
comment
@ezankerВы нашли что-нибудь новое? Я безуспешно искал решение :( Я разместил вопрос об этой проблеме stackoverflow.com/questions/22102458/, если вы можешь мне помочь - person user; 28.02.2014
comment
@ezankerМожете ли вы помочь мне найти ответ на этот вопрос, так как я новичок в jQuery mobile. Возможно ли это сделать с этим stackoverflow.com/questions/22105359/ - person user; 01.03.2014
comment
@ezankerЯ очень благодарен за вашу помощь, никто не может помочь мне так, как вы Пожалуйста, не могли бы вы помочь мне больше в этом вопросе? Можно ли сделать выпадающую панель в jQM? - person user; 01.03.2014
comment
Спасибо, я прочитаю, я думал, что мы можем настроить панель с помощью css, я не думал об использовании всплывающих окон. - person user; 01.03.2014