Как сделать, чтобы Jquery Mobile Grids отображался на разных экранах

У меня есть мобильная сетка Jquery - ui-grid-a на экране, где я должен показать. HTML-экран в ui-block-a и еще один.html экран в ui-block-b, Когда я попытался загрузить экраны, он показывает только пустой экран с индикатором загрузки ajax. Ниже мой код, который я попробовал.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="pageone">
          <div data-role="header">
            <h1>Flexible grid</h1>
          </div>

          <div data-role="main" class="ui-content">
            <div class="ui-grid-a">
              <div class="ui-block-a" id="grid-one"></div>
              <div class="ui-block-b" id="grid-two"></div>
            </div>
          </div>
        </div> 

        <script>
            $(document).ready(function(e){
                $('#grid-one').load('form_demo.html');
                $('#grid-two').load('list_demo.html');
            });
        </script>
    </body>
</html>
Источник

1 ответ

Решение

Я решил сам. Я добавил Iframe, который указывает на страницу.html. Теперь у меня есть 2 .html страницы внутри базовой.html страницы.

Источник
Другие вопросы по тегам