jquery + json generate html buttons with condition - El Forum - 11-17-2012
[eluser]Unknown[/eluser]
Hi all,
My need is to generate buttons with conditions described in json. Help me please, I'm newbie.
Here is my json code:
Code: {
"Caption": "Module caption",
"IconsDirectory": "C://Images/",
"Buttons": [
{
"Conditions": [
{
"ConditionText": "1 == 1",
"ButtonText": "Text1",
"Visible": true,
"Colors": {
"FontColor": "#FFFFFF",
"BGColor": "#00FF00"
},
"Size": {
"Width": 200,
"Height": 50
},
"Icon": {
"FileName": "Smile.png",
"Width": 16,
"Height": 16
},
"Url": {
"UrlAddress": "http://www.google.com",
"OpenNewWindow": true
},
"JavaScriptAction": {
"Text": "alert('ok');"
}
},
{
"ConditionText": "2 == 2",
"ButtonText": "Text2",
"Visible": true,
"Colors": {
"FontColor": "#FFFFFF",
"BGColor": "#00FF00"
},
"Size": {
"Width": 200,
"Height": 50
},
"Icon": {
"FileName": "Smile.png",
"Width": 16,
"Height": 16
},
"Url": {
"UrlAddress": "http://www.google.com",
"OpenNewWindow": true
},
"JavaScriptAction": {
"Text": "alert('ok');"
}
}
]
}
]
}
html code:
Code: <html>
<head>
<title>SMButtons</title>
[removed][removed]
[removed]
//When document loaded.
$(document).ready(function(){
// Get data from file as JSON
$.getJSON('weekendtask.json', function(data) {
var buttons = data.Buttons;
$.each(buttons, function(key, val)
{
$('<li><input type="button" value="'+ val.ButtonText +'"/></li>').appendTo('#ulObj');
});
});
});
[removed]
</head>
<body>
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
|