Question

基本上我正在尝试使我的jquery-mobile应用程序尽可能动态，因此它从JSON文件中获取尽可能多的变量。我已经设置了一个接收JSON文件的javascript方法，它有一系列不同名称的链接按钮，它们链接到我试图动态创建的页面，并通过可折叠元素显示信息。我会承认这是一个非常雄心勃勃的方法，但它是有效的unerrored javascript但我觉得jquery-mobile只是无法处理它。如果有人可以查看我的代码并告诉我是否可以这样做，如果是这样，我做错了什么？这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" value="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0.css" />
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.0.js"></script>
  </head>

  <body>
    <div data-role="page" data-theme="a" id="Page1">
      <div data-role="header" data-theme="c">
        <a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back">Back</a>
        <a href="info.html" data-role="button" class="ui-btn-right" data-transition="flip" data-icon="info"> Info </a>
        <h2>Skin &amp; Soft Tissue</h2>
      </div>
      <div data-role="content" data-theme="c" id="Page1_Content">
        <p class="infotext"><b>Clinical Condition:</b></p>
        <div id="texts"></div>
        <script type="text/javascript">
          $(document).on("pageinit", "#Page1", function () {
              var info = "";
              var dpages = "";
              var pageno = 1;
              var imp = "Json/empirical.json";
              $.getJSON(imp, function (data) {
                  $.each(data.tcontent, function (i, item) {
                      if (item.Name == 'Skin and Soft Tissue Infections') {
                          var search = item.Variations;
                          $.each(search, function (j, subitem) {

                              info += '<a href="#Paged' + pageno + '" data-role="button" data-mini="true">' + subitem.condition + '</a>';

                              dpages += '<div data-role="page" data-theme="a" id="Paged' + pageno + '"> <div data-role="header" data-theme="c"> <a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back"> Back </a> <a href="info.html" data-role="button" class="ui-btn-right" data transition="flip" data-icon="info"> Info </a> <h2>Skin &amp; Soft Tissue</h2> </div> <div data-role="content" data-theme="c" id="Paged ' + pageno + '_Content"> <div data-role="collapsible-set"><div data-role="collapsible" data-mini="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-iconpos="right" data-theme="d" data-content-theme="d"> <h3> Likely Organisms </h3> <p class="guidelinetext"> ' + subitem.organisms + ' </p></div></div> <div data-role="footer" data-theme="c"> <h2>(c) Darragh O Connor </h2></div> </div></div>';
                              pageno++;
                          });
                      }
                      $("#texts").empty().append(info).collapsibleset();
                      $("#pages").empty().append(dpages);
                  });
              });
          });       
        </script>
      </div>
      <div data-role="footer" data-theme="c">
        <h2>(c) Darragh O'Connor </h2>
      </div>
    </div>

    <div id="pages"></div>
  </body>
</html>

使用读取JSON的javascript在jQuery-mobile上动态创建页面

0 个答案: