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

最新推荐文章于 2018-07-27 20:37:02 发布

FerrymanJACK

最新推荐文章于 2018-07-27 20:37:02 发布

阅读量2k

点赞数

分类专栏： Android 文章标签： jquery mobile mobile

本文链接：https://blog.csdn.net/qq_34209528/article/details/70833335

版权

Android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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"
              οnclick="initLastWeek();"> 上周</button>
              <button  class="ui-btn  ui-corner-all ui-icon-bullets  ui-btn-inline  ui-btn-icon-left"
              οnclick="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>