Динамически создавать страницу jQuery Mobile через JavaScript после нажатия

Мое мобильное приложение jQuery состоит из одной страницы index.html и содержит только одну страницу со ссылкой при запуске:

<div data-role="page">
  <div data-role="content">
    <a id="startPageLink" href="startPage">start</a>
  </div>
</div>

Когда пользователь нажимает на ссылку запуска, я хочу асинхронно загрузить содержимое для startPage из моего JSON API. При обратном вызове я хотел бы создать все необходимые элементы DOM для startPage с помощью JavaScript и добавить к нему содержимое. Для этого я создал метод createStartPage(data).

Как правильно реализовать такие динамически создаваемые страницы, чтобы открытие index.html#startPage тоже работало? Я думаю, что должен быть способ подключиться к $.mobile.changePage(), чтобы включить пользовательский код загрузки/создания страницы, но я ничего не нашел. Или есть лучшее решение этой проблемы?


javascript navigation jquery jquery-mobile
person Witek    schedule 18.05.2011    source источник
comment
Последняя версия jQuery Mobile (27 мая) содержит изменения в работе $.mobile.changePage(), которые могут быть полезны: jquerymobile.com/blog/2011/05/27/   -  person thedaian    schedule 09.06.2011

Ответы (5)


arrow_upward
23
arrow_downward

У меня было некоторое время, чтобы возиться с этим, и я нашел решение, которое работает (проверено).

НЕКОТОРЫЕ ПРИМЕЧАНИЯ:

  1. javascript, инкапсулированный в $(document).ready(); предназначен для динамического создания страницы, если пользователь переходит к вашему файлу index.html с уже добавленной меткой (например, index.html#some_hash_mark).
  2. Функция create_page(page_id) предназначена для создания страницы по ссылке (или программно, если хотите).
  3. Обратите внимание, что основной скрипт jquery и jquery mobile css загружаются перед оператором $(document).ready(), но мобильный скрипт jquery загружается после.
  4. Обратите внимание, что тегу body был присвоен идентификатор, который повторно используется при добавлении к нему страниц.

Образец документа

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

    //check if hash exists and that it is not for the home screen
    if (window.location.hash != '' && window.location.hash != '#page_0') {

        //set whatever content you want to put into the new page
        var content_string = 'Some ' + window.location.hash + ' text...<br><br><a href="#page_0">go to home screen</a>';

        //append the new page onto the end of the body
        $('#page_body').append('<div data-role="page" id="' + window.location.hash.replace('#','') + '"><div data-role="content">' + content_string + '</div></div>');

        //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
        $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + window.location.hash.replace('#','') + '">go to ' + window.location.hash.replace('#','') + ' page</a>');
    }
});
function create_page(page_id) {

    //set whatever content you want to put into the new page
    var string = 'FOO BAR page...<br><br><a href="#page_0">return to home screen</a>';

    //append the new page onto the end of the body
    $('#page_body').append('<div data-role="page" id="' + page_id + '"><div data-role="content">' + string + '</div></div>');

    //initialize the new page 
    $.mobile.initializePage();

    //navigate to the new page
    $.mobile.changePage("#" + page_id, "pop", false, true);

    //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
    $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + page_id + '">go to ' + page_id + ' page</a>');

    //refresh the home screen so new link is given proper css
    $('#page_0 div[data-role="content"]').page();
}
</script>
<title>Fixed Headers Example</title>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>

<body id="page_body">
<div data-role="page" id="page_0">
<div data-role="content">Some #page_0 text...<br><br><a href="javascript: create_page('foo_bar_page');">create new page</a></div>
</div>


</body>
</html>
person Jasper    schedule 10.06.2011
comment
Это решает проблему, как начать с определенной динамической страницы. Спасибо. Но как создать дополнительные страницы по запросу (после нажатия на кнопку ‹li›‹a›)?. - person Witek; 12.06.2011
comment
create_page(page_id)... это функция для создания страницы по ссылке. Он создает страницу, инициализирует ее, а затем перенаправляет пользователя на новую страницу. Конкретная функция, которую я написал выше, также создает ссылку на главной странице, поэтому, если пользователь возвращается на домашнюю страницу, он может снова перейти на вновь созданную страницу. Это было задокументировано в ПРИМЕЧАНИИ № 2. <li><a href="javascript:create_page('page_id_here');">link text</a></li> - person Jasper; 13.06.2011

arrow_upward
5
arrow_downward

Для меня решение Jasper не работает, но я нашел это решение, которое выглядит чище и работает нормально

person wezzy    schedule 01.09.2011
comment
Это намного лучшее решение. - person SharpC; 10.01.2020

arrow_upward
4
arrow_downward

Вот мой метод динамического добавления контента на мои веб-сайты Jquery Mobile:

  1. Сначала я создаю "оболочку" data-role=page div следующим образом:

    <div data-role="page" id="my_page_id">
<div data-role="content">
    <script>
    $('#my_page_id').live('pageshow', function() {
        my_data_loading_function('my_page_id');
    });
    </script>
<div id="my_page_id-content"></div>
</div><!--/content-->
</div><!--/page-->

  2. Затем я загружаю данные из внешнего источника в тег div, расположенный на моей странице «обертки»:

    function my_data_loading_function(page) {
    if ($('#' + page + '-content').is(':empty')) {
        $.mobile.pageLoading();
        $('#' + page + '-content').load("my_external_script.php", function() {
            $.mobile.pageLoading(true);
            $('#' + page + '-content ul').listview();
            $('#' + page + '-content ul').page();
        });
    }
}

Некоторые примечания:

  • $.mobile.pageLoading(); и $.mobile.pageLoading(true); показать и скрыть (соответственно) счетчик загрузки Jquery Mobile.

  • if ($('#' + page + '-content').is(':empty')) { позволяет пользователю уйти с динамически созданной страницы, а затем вернуться и не перезагружать данные до тех пор, пока происходит полное обновление страницы.

  • Моя динамически созданная страница включала в себя в основном список, поэтому listview() заставляет мобильную платформу jquery обновлять список, выбранный для добавления правильного css, page() делает то же самое с другими элементами страницы; однако вам может понадобиться использовать только один или другой в зависимости от вашего контента (или вообще ничего, если это просто текст).

  • Я понимаю, что это не создает всю страницу динамически, потому что страница «оболочки» уже жестко запрограммирована, но если вы хотите добавить совершенно новую страницу, вы, вероятно, можете использовать что-то вроде: (непроверено)

    $(document).append('<div data-role="page" id="my_page_id"><div data-role="content">FOO BAR</div></div>');
$('#my_page_id').page();

Если вы действительно хотите, чтобы все это создавалось динамически, вы можете проверить window.location.hash и создать свой div data-role=page с идентификатором, установленным как window.location.hash.

Также я использую Jquery 1.6 и Jquery Mobile 1.0a4.1.

Я надеюсь, что что-то там может помочь кому-то там :)

person Jasper    schedule 10.06.2011
comment
Это решение по-прежнему требует, чтобы все оболочки страниц существовали, прежде чем щелкнуть ссылку. Но потенциально у меня есть тысячи ссылок, ведущих на тысячи разных страниц. Нет ли способа не создавать тысячи неиспользуемых страниц? - person Witek; 12.06.2011

arrow_upward
0
arrow_downward

Вы смотрели на метод загрузки jquery ajax? Похоже, вы могли бы просто загрузить нужную страницу и заменить тело каждый раз, когда у вас есть запрос.

ссылка

person RyanJM    schedule 21.05.2011

arrow_upward
0
arrow_downward

В этом примере на JSFiddle я получаю вызов API от Flickr и запускаю результаты через движок jquery tmpl, чтобы добавить новую страницу в документ, а затем вызвать $.mobile.changePage() для вновь вставленной страницы. Я думаю, вы увидите, насколько полезно сочетание jquery tmpl + apis + jquery mobile.

http://jsfiddle.net/sgliser/8Yq36/5/

person sgliser    schedule 29.11.2011