如何使 Jquery 移动网格映射到不同的屏幕

Question

我有一个 Jquery 移动网格 - ui-grid-a 在一个屏幕中，我必须在 ui-block-a 和另一个 .[=17= 中显示一个 .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>

Answer 1

我自己解决了。我添加了一个指向 .html 页面的 Iframe。现在我在 base .html 页面中有 2 个 .html 页面。

如何使 Jquery 移动网格映射到不同的屏幕

How to make Jquery Mobile Grids mapped to different screens

html

css

jquery

jquery-mobile

jquery-mobile-grid