2013-08-20 91 views
0

我正在PhoneGap的幫助下製作一個Android應用程序。請幫我,我怎麼可以把背景色動態如何動態地帶背景顏色

在HTML5: -

<div data-role="page"> 
    <div data-role="content" > 
     <div class="my_body1">  
      <ul id="table_list_id"></ul> 
     </div> 
    </div> 
</div> 

在CSS3: -

.my_body1 ul li { 
    float: left; 
    list-style-type: none; 
    border: 2px solid #a1a1a1; 
    padding: 5px 5px; 
    text-align: center; 
    width: 120px; 
    border-radius: 5px; 
    margin: 1%; 
    box-shadow: 5px 5px 5px #888888; 
} 

.my_body1 ul { 
    width: 100%; 
} 

.my_body1 ul li a { 
    text-decoration: none; 
    color: #525252; 
} 

在jQuery中: -

function callXMLConnection() { 
    $("#table_list_id").empty(); 
    $.support.cors = true; 
    $.ajax({ 
     type: "GET", 
     url: "table.html", 
     contentType: "text/xml", 
     dataType: "xml", 
     data: "", 
     cache: false, 
     processData: false, 
     crossDomain: true, 
     success: function (data) { 
      $(data).find('xyz').each(function() { 
       var title = $(this).find('title').text(); 
       var status = $(this).find('status').text(); 
       if (status == 'vacant') { 
        var scripts = "<li><a href='#'>" + title + "</a></li>" 
        $("#table_list_id").append(scripts).trigger('create'); 
       } 
       else if (status == 'occupied') { 
        var scripts = "<li><a href='#' >" + title + "</a></li>" 
        $("#table_list_id").append(scripts).trigger('create'); 
       } 
      }); 
     } 

    }); 
} 
$(document).unbind('pageinit').bind('pageinit', function() { 
    callXMLConnection(); 
}); 

我想當狀態爲空時的背景顏色,它應該是綠色的,當狀態被佔用時,它應該是紅色的。

請幫我

回答

1

這可能是代碼來設置使用jQuery的背景色有幫助..線

$("#table_list_id").css("background-color","YOUR COLOR") 
1

嘗試使用css一樣,

var scripts=''; 
if(status == 'vacant'){    
    scripts = "<li style='background-color:green'><a href='#'>"+title+"</a></li>"; 
} 
else if(status == 'occupied'){ 
    scripts = "<li style='background-color:red'><a href='#'>"+title+"</a></li>"; 
} 
if(scripts){ 
    $("#table_list_id").append(scripts) 
         .trigger('create'); 
} 

另外,您可以創建statusclass

CSS

.vacant{background-color:green} /* green background for vacant class */ 
.occupied{background-color:red} /* red background for occupied class */ 

SCRIPT

...... 
    var status = $(this).find('status').text(); 
    var scripts = "<li class='"+status+"'><a href='#'>" + title + "</a></li>"; 
    $("#table_list_id").append(scripts).trigger('create'); 

排序和甜蜜

+0

花花公子u能看到CSS謂我創建一個內盒這個盒子裏的所有數據都來了我需要更改的盒子背景 –

+0

你想表示你想要改變'.my_body1'或者'ul'或者'li'的背景的那個盒子? –

+0

.my_body1 ul li {..} –

1

要使用jQuery設置CSS屬性設置背景顏色,你可以用下面的代碼:

$("#table_list_id").css("background-color","YOUR COLOR") 
0

最後我得到答案感謝您的幫助,但我找到了我自己的答案

在jQuery中: -

$(data).find('xyz').each(function() { 
      var title = $(this).find('title').text(); 
      var status = $(this).find('status').text(); 
      if (status == 'vacant') { 
       var scripts = "<li style='background:#00FF66'><a href='#'>" + title + "</a></li>" 
       $("#table_list_id").append(scripts).trigger('create'); 
      } 
      else if (status == 'occupied') { 
       var scripts = "<li style='background:#FF0000'><a href='#' >" + title + "</a></li>" 
       $("#table_list_id").append(scripts).trigger('create'); 
      } 
});