Menu dinâmico com kendoUI

1,212 views

Published on

Criando um menu dinâmico com KendoUI + PHP

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,212
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Menu dinâmico com kendoUI

  1. 1. Tutorial Kendo UIMenu Dinâmico - kendoMenu Douglas Liradouglas.lira.web@gmail.com
  2. 2. 1 – Objetivo Explicar como carregar um conteudo JSON no kendoMenu.2 – Dificuldade Básico3 – Logica aplicada Criar um array em PHP e carregar os itens no menu kendoMenu4 – 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. 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>

×