2013-08-20 54 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'); 
      } 
});