2012-11-20 47 views
0

我的需求是生成一個指定了背景顏色和字體顏色的按鈕。問題是我只能設置其中一個參數(字體顏色或背景顏色),但不能同時設置這兩個參數。生成一個指定了背景顏色和字體顏色的按鈕

JSON代碼:

{ 
    "Caption": "Module caption", 
    "IconsDirectory": "C://Images/", 
    "Buttons": [ 
     { 
     "Conditions": [ 
      { 
      "ConditionText": "1 == 1", 
      "ButtonText": "Text_11", 
      "Visible": true, 
      "Colors": { 
       "FontColor": "#FFFFFF", 
       "BGColor": "#669933" 
      }, 
      "BButtonText": { 
       "TText": "Textt_1" 
      }, 
      "Size": { 
       "Width": 200, 
       "Height": 50 
      }, 
      "Icon": { 
       "FileName": "Smile.png", 
       "Width": 16, 
       "Height": 16 
      }, 
      "Url": { 
       "UrlAddress": "http://www.google.com", 
       "OpenNewWindow": true 
      }, 
      "JavaScriptAction": { 
       "TText": "alert('ok1');" 
      }}, 
     { 
      "ConditionText": "2 == 2", 
      "ButtonText": "Text_22", 
      "Visible": true, 
      "Colors": { 
       "FontColor": "#0FFFFF", 
       "BGColor": "#FF9966" 
      }, 
      "BButtonText": { 
       "TText": "Textt_1" 
      }, 
      "Size": { 
       "Width": 200, 
       "Height": 50 
      }, 
      "Icon": { 
       "FileName": "Smile.png", 
       "Width": 16, 
       "Height": 16 
      }, 
      "Url": { 
       "UrlAddress": "http://www.google.com", 
       "OpenNewWindow": true 
      }, 
      "JavaScriptAction": { 
       "TText": "alert('ok2');" 
      }} 
     ]} 
    ] 
} 

的html代碼:

<!DOCTYPE html> 
<html> 
<head> 
<title>SMButtons</title> 
<script src="jquery/jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $.getJSON('weekendtask.json', function(data) { 
    var res = "" 
    $.each(data.Buttons, function(key, button) { 
     $.each(button.Conditions, function(key, condition) { 
      res += "<li>" 
      res += '<input type="button"' + '" value="' + condition.BButtonText.TText 
      res += '" onclick="' + condition.JavaScriptAction.TText 

      //background color 
      res += '" style=" background-color:' + condition.Colors.BGColor 

      //font color 
      //res += '" style=" color:' + condition.Colors.FontColor 

      res += '"/>' 
      res += "<\/li>" 
     }) 
    }) 
    $(res).appendTo('#ulObj') 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<ul id='ulObj'> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</div> 
</body> 
</html> 
+1

爲什麼不能設置顏色和背景顏色? – adamb

回答

2

你兩次寫的樣式屬性。爲什麼不這樣做

res += '" style=" background-color:' + condition.Colors.BGColor + '; color:' + condition.Colors.FontColor + ';'; 
+0

邁克布蘭特,很好,謝謝。 – Marchello