Добавить динамически ссылки на jQuery Mobile - PullRequest
Новая
       28

Добавить динамически ссылки на jQuery Mobile

3 голосов
/ 20 марта 2011

Я много читал о том, как динамически добавлять вещи в jquery mobile, но я не мог понять, как добавлять ссылки.

В настоящее время мое решение выглядит так:

  1. Добавить новую страницу - с идентификатором (id = "list-1")
  2. Создание ссылки для него (href = "# list-1")

Это решение отлично работает на статических страницах, но я хочу сделать это динамически. Я много пробовал с page() и тому подобными вещами, но мне ничего не помогло.

Мои вопросы:

  1. Как добавить динамические ссылки и страницы?
  2. Я выбрал правильный способ использования идентификаторов и якорей (# list-1) в качестве ссылок или есть другое решение для jquery mobile?

Дайте мне знать, если вам нужна дополнительная информация

Ответы [ 2 ]

4 голосов
/ 21 марта 2011

Чтобы добавить динамические ссылки, я обнаружил, что самый простой способ - просто прослушивать события, ожидающие щелчка по этим ссылкам.Этот прослушиватель событий затем сохраняет все параметры, которые вы хотите передать, на следующую страницу, которую вы посещаете.Вы передаете параметры из элемента списка в прослушиватель событий, просто указав параметры в каждом элементе "li". 

(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');

Тогда ваш прослушиватель событий будет выглядеть примерно так: 

$('#my-page').delegate('li', 'click', function() {
    passedParameter = $(this).get(0).getAttribute('passed-parameter');
});

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

$('[data-role=page]').live('pageshow',function(e, ui){ 
    page_name = e.target.id;
    if (page_name == 'my-page-2'){
        (do something with passedParameter)
    }
});

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

0 голосов
/ 22 марта 2013

Любое новое усовершенствование DOM должно быть выполнено до инициализации страницы.Но по умолчанию JQM автоматически инициализирует страницу после загрузки страницы в браузер.

Следовательно, сначала необходимо установить для свойства autoInitializePage значение false, а затем вызвать метод initializePage () после добавления новой страницы и ссылок в документ.Надеюсь, это поможет. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
    $(document).bind("mobileinit", function(){
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
    $(document).ready(function() {

        //add a link.
        $("#page1 div[data-role='content']").append('<a href="#page2">Next Page</a>');

        //add a page.
        $('body').append('  <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header">  <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3><a href="#page1">Back</a></div><footer data-role="footer" data-position="fixed"><h5>&copy; All rights reserved</h5></footer></div>');

    });

    window.onload = function() {
        $.mobile.initializePage();
    };

</script>
</head>
<body>
    <div data-role="page" id="page1">   
        <header data-role="header" class="header">
            <h5>jQuery Mobile</h5>
        </header>
        <div data-role="content">
            <form method="get" action="" data-transition="slideup">
                <label for="email">Email:</label>
                <input type="email" name="email" id="email" value=""/>              
            </form>
        </div>
        <footer data-role="footer" data-position="fixed"><h5>&copy; All rights reserved</h5></footer>
    </div>
</body>
</html>
...