Carregando conteúdo JSON no Kendo Menu

Tutorial Kendo UI

Menu Dinâmico - kendoMenu

Douglas Lira
douglas.lira.web@gmail.com

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 ;)

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>

Carregando conteúdo JSON no Kendo Menu

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (16)

Similar a Carregando conteúdo JSON no Kendo Menu

Similar a Carregando conteúdo JSON no Kendo Menu (20)

Carregando conteúdo JSON no Kendo Menu