2013-10-04 84 views
0

添加到li的動態範圍 - 丟失了listview的JQuery-Mobile格式。他們是重新刷新跨度的一種方式嗎?JQuery Mobile - 在li內部刷新範圍

更新的代碼:

顯示額外的代碼和HTML部分,列表視圖不會刷新或標準查詢移動格式格式:

<div data-role="page" data-theme="b" id="one" data-add-back-btn="true"> 
    <div data-role="header"> 
     <h1>CHATS</h1> 
     <a class="ui-btn-right" id="infoButton" onclick="emptyRegions();">Refresh</a> 
    </div><!-- /header --> 

    <div data-role="content" data-theme="b" id="regions"> 

     <div data-role="content"> 

      <ul data-role="listview" data-inset="true" id="timeStatus"> 
       <!-- AJAX CONTENT --> 
      </ul> 
     </div> 

     <div data-role="collapsible" id="collapsible3"> 
      <h4>Regions I, II, III</h4> 
      <ul data-role="listview" data-inset="true" id="region3"> 
       <!-- AJAX CONTENT --> 
      </ul> 
     </div> 


$.get(URL_R3, function(data) { 
      $(data).find("tr:has(td.Chats)").each(function() { 
       var $li = $('#region3').append('<li></li>'); 
       var $tds = $(this).find('td'); 
       $li.append('<span class="countyHx">' + $tds.eq(0).html() + '</span><br>' 
       + '<span style="width: 20%; background-color: yellow;">' 
       + $tds.eq(1).html() + '</span>' 
       + '<span style="width: 20%; background-color: red;">' 
       + $tds.eq(2).html() + '</span>' 
       + '<span style="width: 20%; background-color: green;">' 
       + $tds.eq(3).html() + '</span>' 
       + '<span style="width: 20%; background-color: orange;">' 
       + $tds.eq(4).html() + '</span>' 
       + '<span style="width: 20%; background-color: purple;">' 
       + $tds.eq(5).html() + '</span>'); 
      }); 

     $('#region3').listview('refresh'); 

}, 'html') 
+0

你不能刷新'span'而不是'li'。向我們展示「靜態」你想要達到的目標,這樣我們就可以理解問題所在。在你之前的問題中,你說你想橫向不橫向。 – Omar

+0

參見小提琴的例子,佈局是我想要的,只是沒有格式化在JQuery-Mobile http://jsfiddle.net/MvHTR/7/ – BarclayVision

+0

這個http://jsfiddle.net/Palestinian/MvHTR/13/? – Omar

回答

0

由於奧馬爾的解決辦法很簡單,只是包裝跨度在li中,我創建了其他的軟件並將其添加到ul中。

  $(data).find("tr:has(td.Chats)").each(function() { 
       var $li = $('#region3'); //.append('<li></li>'); 
       var $tds = $(this).find('td'); 
       var txtcolor = $(this).css("color"); 
       $li.append('<li style="height: 24px;"><span>' + $tds.eq(0).html() + '</span><br>' 
       + '<span style="float: left; width: 20%; height: 24px; background-color:' 
       + $tds.eq(1).css("background-color") + '; color:' + $tds.eq(1).css("color") + ';">' 
       + $tds.eq(1).html() + '</span>' 
       + '<span style="float: left; width: 20%; height: 24px; background-color:' 
       + $tds.eq(2).css("background-color") + '; color:' + $tds.eq(2).css("color") + ';">' 
       + $tds.eq(2).html() + '</span>' 
       + '<span style="float: left; width: 20%; height: 24px; background-color:' 
       + $tds.eq(3).css("background-color") + '; color:' + $tds.eq(3).css("color") + ';">' 
       + $tds.eq(3).html() + '</span>' 
       + '<span style="float: left; width: 20%; height: 24px; background-color:' 
       + $tds.eq(4).css("background-color") + '; color:' + $tds.eq(4).css("color") + ';">' 
       + $tds.eq(4).html() + '</span>' 
       + '<span style="float: left; width: 20%; height: 24px; background-color:' 
       + $tds.eq(5).css("background-color") + '; color:' + $tds.eq(5).css("color") + ';">' 
       + $tds.eq(5).html() + '</span></li>'); 
      }); 

      $('#region3').listview('refresh');