My need is to generate a button with background color and font color specified. The problem is that I can set only one of these parameters (font color or background color), but not both.
JSON code:
{
"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 code:
<!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>
You are writing the style property twice. Why not do this