Мобильный виджет JQuery не форматирует динамический контент при повторных посещениях - PullRequest
Новая
       3

Мобильный виджет JQuery не форматирует динамический контент при повторных посещениях

3 голосов
/ 20 января 2012

У меня есть одностраничное мобильное приложение jQuery с четырьмя data-role = 'pages' "; так что, по сути, это один документ HTML с четырьмя "страницами".

Каждая «страница» также имеет нижний колонтитул навигации, который я динамически заполняю через javascript. Я определил переменную под названием «theFooter» и назначил все мои пустые div-элементы нижнего колонтитула (с классами «footer») следующим образом: 

$('.footer').html(theFooter);

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

$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
    console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that     the 'page' has been run
    $('.footer').html(theFooter);
});

Работает как во сне, в первый раз. Давайте предположим, что страницы «о», «контакт», «миссия» и «календарь» ...

Вы нажимаете "о" ... идеально.

Вы нажимаете "контакт" ... идеально.

Вы можете сделать это для каждой из «страниц», и каждый раз, когда «pagebeforecreate» запускается, а нижний колонтитул выглядит БОЛЬШИМ.

ОДНАКО, если теперь вы снова нажмете, скажем, «о» (или любой из тех, которые вы уже посетили), страница перейдет и содержимое будет на месте, но ФОРМАТИРОВАНИЕ ПЕРЕДВИЖЕНИЯ JQUERY НЕТ. И он не запускает функцию pagebeforecreate снова, что имеет смысл, потому что она уже была создана в первый раз.

Я пытался работать с стрельбами pageinit и pagebeforeshow, но ничего не получил.

Я попробовал методы .trigger () и .page ()… и ничего не получил.

Может кто-нибудь объяснить, как сделать эту карту форматирования JQuery Mobile?

Ответы [ 2 ]

3 голосов
/ 20 января 2012

Если вы позвоните .trigger('create') на родительский элемент виджета, вы можете улучшить его разметку в любой момент времени: 

$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
    console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that     the 'page' has been run
    $('.footer').html(theFooter).trigger('create');
});
0 голосов
/ 24 марта 2012

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet"  href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title>

<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create');
    });
</script>
</head>

<body>
omt
<div>
    <div id="omtList">  


    </div><!--/content-primary -->  
</body>
</html>
...