Question

我正在尝试使用一些随机JSON数据动态创建HTML列表代码是 -

 <div data-role="page" id="pageone">
     <div data-role="header">
      <h1>Lists</h1>
     </div>
     <div data-role="main" class="ui-content">
      <h2>AJAX List View</h2>
      <div id='list'></div>
     </div>
      <script type="text/javascript">
          var str;
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function() {
           if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
               str = xmlhttp.responseText;
               str = JSON.parse(str);
               var q = "";
               for(i=0;i<str.length;i++) {
                q += "<div data-role='collapsible' data-inset='false'><h4>" + str[i].title + "</h4>";
                q += "<ul data-role='listview' data-inset='true'><li>Details: " + str[i].duration + "</li><li>Price: " + str[i].price + "</li></ul>";
                q += "</div>";
               }
               document.getElementById('list').innerHTML = q;
           }
          };
          xmlhttp.open("GET", "http://phonegappro.esy.es/test/json.php", true);
          xmlhttp.send();    
       </script>
 </div>

当我运行此代码时，它会查看类似这样的内容 -

但是当我尝试通过编写每个UL＆amp; OL它根据我的需要运行。

Header Libs -

<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.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Answer 1

jQueryMobile对象的data-role="collapsible" & data-role="listview"属性是什么？

如果是，在ajax成功加载后，您需要重新绘制它们以确保它们以正确的外观进行编译。

参考jQueryMobile api documentation，您可以使用以下方法绘制可折叠：

$( ".selector" ).collapsible();

这适用于listview绘图初始化：

$( "#mylist" ).listview();

对于您的脚本，您需要添加这两个初始化程序，如下所示：

var str;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        str = xmlhttp.responseText;
        str = JSON.parse(str);
        var q = "";
        for (i = 0; i < str.length; i++) {
            q += "<div data-role='collapsible' data-inset='false'><h4>" + str[i].title + "</h4>";
            q += "<ul data-role='listview' data-inset='true'><li>Details: " + str[i].duration + "</li><li>Price: " + str[i].price + "</li></ul>";
            q += "</div>";
        }
        document.getElementById('list').innerHTML = q;
    }

    $('div[data-role="collapsible"]').collapsible();
    $('ul[data-role="listview"]').listview();
};
xmlhttp.open("GET", "http://phonegappro.esy.es/test/json.php", true);
xmlhttp.send();

请原谅我的英语不好：）

列表视图HTML静态与动态

1 个答案: