jQuery Mobile列表样式失效解决方案

来源：互联网发布：nike回到未来价格知乎编辑：程序博客网时间：2024/06/05 22:46

1.先来看官方文档实例效果：

2.实现代码如下：

<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

 <div data-role="page" id="pageone">  <div data-role="main" class="ui-content">    <h2>List Dividers</h2>    <ul data-role="listview">      <li data-role="list-divider">欧洲</li>      <li><a href="#">德国</a></li>      <li><a href="#">英国</a></li>      <li data-role="list-divider">亚洲</li>      <li><a href="#">中国</a></li>      <li><a href="#">印度</a></li>      <li data-role="list-divider">非洲</li>      <li><a href="#">埃及</a></li>      <li><a href="#">南非</a></li>    </ul>  </div></div>

3.项目应用

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><style>   ul,li{    list-style-type:none;  }</style><script type="text/javascript">       $(function(){     initThisWeek();       });               function initLastWeek(){           var $WTdiv = $("#workTime");    $WTdiv.children().remove();     $.ajax({    type:'post',      url:'*************************',    async:false,    data:{"workDate":"lastweek","randMath":Math.random()*Math.random()},    dataType:'json',    success:function(result){        if(result.status=="1"){    alert(result.msg);    }else{       var records=result.workrecords;       var $grid = $("<ul data-role='listview' data-inset='true'></ul>");       var $p = $("<p style='text-align:center'>上周工时统计("+records[0].workDate +"至"+records[5].workDate+")</p>");       var $day = $("<li data-role='list-divider'>周一</li>"          +"<li data-role='list-divider'>周二</li>"          +"<li data-role='list-divider'>周三</li>"          +"<li data-role='list-divider'>周四</li>"          +"<li data-role='list-divider'>周五</li>"          +"<li data-role='list-divider'>周六</li>"          +"<li data-role='list-divider'>周日</li>"          +"<li data-role='list-divider'>总计</li>");            // var data=JSON.stringify(result.workrecords);        for(var i=0;i<records.length;i++){       var $content = $("<li></li>");       var $str;       $str=$("<li><a href='#'>"+records[i].workTime+"</a></li>");       $content.append($str);        alert(records[i].workTime);       }       $day.append($content);       $WTdiv.append($p);       $WTdiv.append($grid);       $grid.append($day);       $grid.append($str);           }    }    });       }           function initThisWeek(){          var $WTdiv = $("#workTime");   $WTdiv.children().remove();    $.ajax({   type:'post',   url:'**********************************',   async:false,   data:{"workDate":"thisweek","randMath":Math.random()*Math.random()},   dataType:'json',   success:function(result){     if(result.status=="1"){   alert(result.msg);   }else{         var records=result.workrecords;   var $grid = $("<ul id='myList' data-role='listview'></ul>");   var $p = $("<p style='text-align:center'>本周工时统计("+records[0].workDate +"至"+records[1].workDate+")</p>");   var $day = $("<li data-role='list-divider'>周一</li>"      +"<li data-role='list-divider'>周二</li>"      +"<li data-role='list-divider'>周三</li>"      +"<li data-role='list-divider'>周四</li>"      +"<li data-role='list-divider'>周五</li>"      +"<li data-role='list-divider'>周六</li>"      +"<li data-role='list-divider'>周日</li>");        // var data=JSON.stringify(result.workrecords);    $("#myList").listview("refresh");   for(var i=0;i<records.length;i++){   var $content = $("<li></li>");   var $str;    $str=$("<a href='#'>"+records[i].workTime+"</a>");    $content.append($str);    alert(records[i].workTime);   }      $day.append($content);   $WTdiv.append($p);   $WTdiv.append($grid);   $grid.append($day);   $grid.append($content);    */   var html = "<ul id='myList' data-role='listview'>";   var resultCount = Number(result.workrecordsCount);     for(var i=0;i<resultCount;i++){html += "<li data-role='list-divider'>"+result.workrecords[i].workDate+"</li>";html += "<li><a href='#'>名称：  "+result.workrecords[i].projectName+"</a></li>";html += "<li><a href='#'>工时：  "+result.workrecords[i].workTime+"</a></li>";html += "<li><a href='#'>内容：  "+result.workrecords[i].context+"</a></li>";}   html += "</ul>";   $("#workTime").html(html);           $("#workTime").trigger('create');      //解决列表样式丢失！   $("#myList").listview("refresh");      //解决列表样式丢失！   }   }   });       }       </script></head><body>    <div data-role="page">       <div data-role="header" style="text-align:center">          <h1>**********</h1>       </div>              <!--  -->       <div data-role="main" class="ui-content" style="height:540px">          <div style="text-align:center" >                                      <button  class="ui-btn  ui-corner-all ui-icon-bars     ui-btn-inline  ui-btn-icon-left"              onclick="initLastWeek();"> 上周</button>              <button  class="ui-btn  ui-corner-all ui-icon-bullets  ui-btn-inline  ui-btn-icon-left"              onclick="initThisWeek();"> 本周</button>                                      </div>                    <div id="workTime" style="padding-top:50px"> </div>                 </div>       <!--  -->              <div data-role="footer">          <div data-role="navbar">             <ul>                <li><a  data-icon="plus">*******</a></li>                <li><a  data-icon="info">*******</a></li>             </ul>          </div>       </div>           </div>     </body></html>

<----------------------------->

------------------------------如上图，列表样式无法正常显示。增加代码中标红部分之后，显示正常！-----------------------------------------------

0 0