jquery + json генерация кнопок с условием отображения

marchello · November 17, 2012

Привет всем!

Пытаюсь сгенерировать кнопки, условия отображения которых описаны в json. Подскажите, как сделать. Чтобы показать, что у меня все-таки самостоятельно кое-что получается, ниже показал свой успешный пример (генерация кнопок из json без условия).

Вот мой код json (из того, что НЕ получается) :


{
    "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 (из того, что НЕ получается) :


<html>
<head>
<title>SMButtons</title>
<script src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">	        
//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" onClick="'+ val.JavaScriptAction +'" value="'+ val.ButtonText +'"/></li>').appendTo('#ulObj');
           });
   });	    	   
 	 });
   </script>
</head>
<body>
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>

Вот мой код json (из того, что УЖЕ получается) :


{
    "Caption": "Module caption",
    "IconsDirectory": "C://Images/",
    "Buttons": [
        {
            "TText": "google",
            "JavaScriptAction": "alert('google')"
        },
        {
            "TText": "microsoft",
            "JavaScriptAction": "alert('microsoft')"
        },
        {
            "TText": "yahoo",
            "JavaScriptAction": "alert('yahoo')"
        }
    ]
}

код html (из того, что УЖЕ получается) :


<html>
<head>
<title>SMButtons</title>
<script src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">	        
//When document loaded.
$(document).ready(function(){   
// Get data from file as JSON
            $.getJSON('Module.json', function(data) {
            // Set json data from file to variable 'persons'
    var buttons = data.Buttons;
    var icondir = data.IconsDirectory;
    // For each item of variable person append to ul list
           $.each(buttons, function(key, val)
           {	
                    //$("<li><input type='button' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' style='"+ val.Style +"' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' value='"+ val.TText +"'/></li>").appendTo('#bbb');
                    //style="height: 25px; width: 100px"
                    //$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
                    $('<li><input type="button" onClick="'+ val.JavaScriptAction +'" value="'+ val.TText +'"/></li>').appendTo('#ulObj');
});
    //var knop = data.Knop;
    // For each item of variable person append to ul list
           //$.each(buttons, function(key, val)
           //{	
                    //$("<li><input type='button' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' style='"+ val.Style +"' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#bbb');
                    //style="height: 25px; width: 100px"
                    //$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
                    //$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
//});
   });	    	   
 	 });
   </script>
</head>
<body>
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
</ul>
</div>
<br>
<div>
<ul id='aaa'>
<!--<li>1</li>--> 
</ul>
</div>
<!--<button type="submit" style="height: 95px; width: 550px"> </button>--> 
<!--background: url('img/submit_button.jpg'); background-position: center; background-repeat: no-repeat;  background-color:Transparent;--> 
<div>
<ul id='bbb'>
<!--<li><img src="img/submit_button.jpg"/></li>-->
<!--<li>Button caption</li>-->
</ul>
</div>
</body>
</html>

Sign In

jquery + json генерация кнопок с условием отображения

Question

marchello

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information