Menu dinâmico com kendoUI
0 gostou855 visualizações
O documento explica como carregar itens de menu dinamicamente de um arquivo JSON em um menu Kendo UI. Ele descreve como criar um array PHP com itens de menu e subitens e converter para JSON, e como usar jQuery AJAX para carregar os dados e inicializar o menu Kendo UI.
![1 – menu.php
// Menu
$menuArray = array();
$menuSubArray = array();
// Criando o Menu
for($i = 0; $i < 10; $i++) {
$menuConteudo = array();
$menuConteudo['text'] = "Item ".$i;
for($z = 0; $z < 2; $z++) {
$menuSubConteudo = array();
$menuSubConteudo['text'] = "Sub Item ".$z;
$menuSubConteudo['url'] = "www.yahoo.com.br";
array_push($menuSubArray, $menuSubConteudo);
}
$menuConteudo['items'] = $menuSubArray;
array_push($menuArray, $menuConteudo);
$menuSubArray = array();
}
// Resultado
echo json_encode($menuArray);
2 – index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu KendoUI</title>
<style type="text/css">
@import url("css/kendo.common.min.css");
@import url("css/kendo.default.min.css");
</style>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/plugin/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "menu.php",
async: true,
dataType:'text json',
error: function(txt){
alert(txt);
},
success: function(data,status,xhr) {
$("#menu").kendoMenu({
dataSource: data
});
}
});
});
</script>
</head>
<body>
<div id="menu"></div>
</body>
</html>](https://image.slidesharecdn.com/tutorialkendoui-120711092419-phpapp02/85/Menu-dinamico-com-kendoUI-3-320.jpg)
Menu dinâmico com kendoUI
- 1. Tutorial Kendo UI Menu Dinâmico - kendoMenu Douglas Lira douglas.lira.web@gmail.com
- 2. 1 – Objetivo Explicar como carregar um conteudo JSON no kendoMenu. 2 – Dificuldade Básico 3 – Logica aplicada Criar um array em PHP e carregar os itens no menu kendoMenu 4 – Observações Não pretendo explica como funciona o kendoUI, nem tão pouco como dever configurado (basta ir no site que tem tudo explicado). O objetivo do tutorial é explicar apenas como carregar um conteudo JSON no kendoMenu, sendo assim observe e estude ou qualquer coisa mande e-mail ;)
- 3. 1 – menu.php // Menu $menuArray = array(); $menuSubArray = array(); // Criando o Menu for($i = 0; $i < 10; $i++) { $menuConteudo = array(); $menuConteudo['text'] = "Item ".$i; for($z = 0; $z < 2; $z++) { $menuSubConteudo = array(); $menuSubConteudo['text'] = "Sub Item ".$z; $menuSubConteudo['url'] = "www.yahoo.com.br"; array_push($menuSubArray, $menuSubConteudo); } $menuConteudo['items'] = $menuSubArray; array_push($menuArray, $menuConteudo); $menuSubArray = array(); } // Resultado echo json_encode($menuArray); 2 – index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu KendoUI</title> <style type="text/css"> @import url("css/kendo.common.min.css"); @import url("css/kendo.default.min.css"); </style> <script type="text/javascript" src="js/jquery-min.js"></script> <script type="text/javascript" src="js/plugin/kendo.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ url: "menu.php", async: true, dataType:'text json', error: function(txt){ alert(txt); }, success: function(data,status,xhr) { $("#menu").kendoMenu({ dataSource: data }); } }); }); </script> </head> <body> <div id="menu"></div> </body> </html>