Вставка элементов в DOM на странице на основе jQuery Mobile - PullRequest
Новая
       3

Вставка элементов в DOM на странице на основе jQuery Mobile

5 голосов
/ 10 февраля 2011

Я экспериментирую с мобильным приложением jQuery, которое в конечном итоге превратится в мобильное устройство, не являющееся веб-приложением, поэтому весь контент должен быть локальным. По этой причине (я думаю) мне нужно создать приложение на одной странице, отмеченной тегами data-role="page", в противном случае механизм загрузки ajax в jQuery Mobile не работает.

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

В моей функции $(document).ready() я выполняю поиск в БД, и для каждого результата я создаю тег <li> вокруг результатов своей БД, а затем вызываю $(".list").append(li_str);, где .list - это класс моего тега <ul>.

Страница отображается так, как если бы jQuery Mobile отсутствовал - я вижу правильные данные в каждом <li>, но она выглядит неправильно.

Сравнение этого результата с версией, в которой я жестко кодирую теги <li> на странице HTML - похоже, jQuery Mobile изменяет теги и добавляет много новых классов и т. Д.

Может быть, мне нужно построить страницу из БД ранее в цикле загрузки страницы? Есть предложения?

Ответы [ 3 ]

9 голосов
/ 08 ноября 2011

Ни звонки $("changed-parent-element").listview(), ни $("changed-parent-element").trigger("create") на самом деле не работали для меня. Чтобы несколько раз изменить содержимое DOM и повторить стилевое оформление jQuery для мобильных устройств, мне понадобилось: 

$("changed-parent-element").listview("refresh");

Версия: jQuery mobile 1.0 RC2

5 голосов
/ 10 февраля 2011

Проблема эта проблема . Итак, измени свой код: 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <script>
    function build_dynamic_content()
    {
        var num_entries = 5;

        for (var i = 0; i < num_entries; ++i)
        {
            var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
            li_str += "<img src=\"" + "icon.png" + "\" />";
            li_str += "</li>";

            $(".mainlist").append(li_str);
        }
    }
    </script>
</head>

<body>
    <div data-role="page" id="list" data-fullscreen="false">
        <div data-role="content">
            <ul class="mainlist" data-role="listview">
                <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
            </ul>
        </div>
    </div>
<script>build_dynamic_content();</script>
</body>
</html>

Кроме того, вы можете отложить создание представления списка до тех пор, пока не будут созданы все элементы (как описано в связанном потоке): 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <script>
    function build_dynamic_content()
    {
        var num_entries = 5;

        for (var i = 0; i < num_entries; ++i)
        {
            var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
            li_str += "<img src=\"" + "icon.png" + "\" />";
            li_str += "</li>";

            $(".mainlist").append(li_str);
        }
    }

    $(function ()
    {
        build_dynamic_content();
        $('ul.mainlist').listview();
    });
    </script>
</head>

<body>
    <div data-role="page" id="list" data-fullscreen="false">
        <div data-role="content">
            <ul class="mainlist">
                <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
            </ul>
        </div>
    </div>
</body>
</html>

Извините за дампы кода; Я не мог заставить это работать в jsfiddle .

4 голосов
/ 10 февраля 2011

Ответ Мэтта не является общим ответом на вопрос.Я уже освещал это много раз в других вопросах.

Вышеописанное работает со списком, но не с любым содержимым в целом.

Чтобы добавить элементы в DOM в jQuery Mobile, вам необходимо знать функцию .page ().1006 * Я сделал учебник по этому вопросу http://jquerymobiledictionary.pl/faq.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...