Fatal编程技术网
  • javascript/
  • 使用读取JSON的javascript在jQuery mobile上动态创建页面

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

javascript jquery html json jquery-mobile

使用读取JSON的javascript在jQuery mobile上动态创建页面,javascript,jquery,html,json,jquery-mobile,Javascript,Jquery,Html,Json,Jquery Mobile,基本上，我试图使jquery移动应用程序尽可能动态，因此它从JSON文件中获取尽可能多的变量。我已经设置了一个javascript方法，它接收JSON文件，有一系列不同名称的链接按钮，它们链接到我试图动态创建的页面，并通过可折叠元素显示信息。 我承认这是一个失败的雄心勃勃的方法，但它是有效的无错误javascript，但我觉得jquery mobile无法处理它。 如果有人可以看一下我的代码，告诉我是否可以这样做，如果可以，我做错了什么？这是我的密码： <!DOCTYPE html>

基本上，我试图使jquery移动应用程序尽可能动态，因此它从JSON文件中获取尽可能多的变量。我已经设置了一个javascript方法，它接收JSON文件，有一系列不同名称的链接按钮，它们链接到我试图动态创建的页面，并通过可折叠元素显示信息。 我承认这是一个失败的雄心勃勃的方法，但它是有效的无错误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>
页面应附加到body=$.mobile.pageContainer.$。mobile.pageContainer.appenddpages；Omar是正确的，请将页面添加到正文。您可以为页面分配一个类，然后轻松删除以前的动态页面$.classname.remove。这里有一个类似的问题：是的，奥马尔。这很有效。谢谢然后我尝试将页面更改为data rel=dialog，但这打乱了可折叠文件的格式。我认为这只是因为JQM无法处理对话框中的可折叠文件？如果要创建对话框，请使用data role=dialog而不是data role=page。data rel=dialog用于链接调用对话框。我已将data rel=dialog放在页面的链接中。我也加入了data role=dialog，格式保持不变。看起来可折叠文件位于对话框的一个单独页面上，尽管由于白色背景的缘故，它最初看起来是一样的，但它会落在对话框页面上。