jQueryMobile 'data-scroll = true' не работает на страницах с динамической вставкой - PullRequest
Новая
       15

jQueryMobile 'data-scroll = true' не работает на страницах с динамической вставкой

1 голос
/ 02 декабря 2011

data-scroll="true" работает нормально, если страница является статической страницей, но если я динамически добавляю страницу с использованием javascript, она не работает.

Раздел моего заголовка: 

<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="css/jquery.mobile.scrollview.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile.scrollview.js"></script>
<script type="text/javascript" src="js/scrollview.js"></script>

Я также добавил атрибут data-scroll и установил его на true, используя JavaScript, ниже мой код: 

var pageHtml = "<div data-role='page' data-scroll='true' id=page" + pageId + " data-url=page" + pageId + ">";
var pageHeader = "<div data-role='header' data-position='fixed'><h1>" + menuItem + "</h1></div>";
var pageContent = "<div data-role='content' id='page" + pageId + "Content'></div>";
var page = pageHtml + pageHeader + pageContent + "</div>";
$(page).appendTo($.mobile.pageContainer);

Пожалуйста, помогите мне ...

Ответы [ 3 ]

1 голос
/ 10 января 2012

Попробуйте что-то вроде этого: 

$('yourScrollersId').scrollview();

У меня была такая же проблема, у меня сработало.

Лучше позже, чем никогда: -)

1 голос
/ 17 июня 2012

После долгих исследований я обнаружил, что

1002 * нам нужно загрузить динамический HTML для каждого блока прокрутки в уникальный контейнер s.

, например, для .-

HTML 

<div data-role="content" id="container">

    <div id="scrollContainer"></div>

    <div id="anotherContainer"></div>

</div>

JS

если мы сначала загрузили scrollview в scrollContainer, 

$('#scrollContainer').html(loadHtml);
$("#scrollContainer").scrollview();
$("#scrollContainer").trigger('create');

затем в следующий раз нам нужно загрузить в другой контейнер - 

$('#anotherContainer').html(loadHtml);
$("#anotherContainer").scrollview();
$("#anotherContainer").trigger('create');

Необязательно

Чтобы снова динамически загрузить в #scrollContainer, мы можем удалитьи воссоздать <div>.после выполнения второго блока кода 

$('#scrollContainer').remove();
$('#container').append('<div id="scrollContainer"></div>');
//$('#scrollContainer').empty();  // simply making this DIV empty WILL NOT WORK, we need to REMOVE DYNAMIC CLASSES, STYLES also. So, its better to recreate the LOADCONTAINER

должны быть другие решения, но это действительно работает.

0 голосов
/ 02 декабря 2011

Вам нужно, чтобы JQM применил эту страницу - попробуйте 

$(page).appendTo($.mobile.pageContainer).page();

или даже 

$(page).appendTo($.mobile.pageContainer).trigger('create');

Надеюсь, это поможет

ОБНОВЛЕНИЕ: вот документация JQM о том, как официально сделать это

...