Como montar esse menu dinamicamente usando json? Que ele fosse montado de acordo com a ordem que viesse. É possivel?
-
1Pelo o que vi, você tem funções prontas para cada item do menu, correto?– Rafael AugustoCommented 30/10/2017 às 15:08
-
@Rafael Isso, tem sim!– IsaCommented 30/10/2017 às 15:11
-
@RafaelAugusto é possivel?– IsaCommented 30/10/2017 às 15:17
-
@RafaelAugusto esse menu pode ou não ter todos esses itens, e poderia trocar a ordem das li, é possivel ser dinâmico assim?– IsaCommented 30/10/2017 às 15:19
-
1Quais os itens que são fixos desse menu? Itens que não viriam pelo json, mas sim são fixos sempre no menu? Outra coisa, vc tem um json pronto ou posso montar um eu mesmo pra elaborar a resposta?– Leandro SimõesCommented 30/10/2017 às 15:46
|
Mostrar mais 3 comentários
2 Respostas
Da pra fazer sim Isa, segue o código:
https://jsfiddle.net/leandrosimoes/0vt1tvc8/3/
// Objeto JSON retornado do servidor
var jsonObject = {
items: [
{
onclickFunctions: ['displayPracaRamos', 'displayPracaCidadeMilao'],
icon: 'glyphicon-tree-deciduous',
title: 'Praças'
},
{
onclickFunctions: ['displayCameraCasteloBranco1', 'displayCameraCasteloBranco2'],
icon: 'glyphicon-camera',
title: 'Cameras'
},
{
onclickFunctions: ['displayAlarmsMarker'],
icon: 'glyphicon-alert',
title: 'Ocorrências'
},
{
onclickFunctions: ['showPois'],
icon: 'glyphicon-map-marker',
title: 'POIS'
},
{
onclickFunctions: [],
icon: 'glyphicon-pushpin',
title: 'Minha Localização'
},
{
onclickFunctions: ['toggleFullScreen'],
icon: 'glyphicon-fullscreen',
title: 'Tela Inteira'
}
]
};
// Funções que serão atribuídas aos itens do menu
var menuFunctions = {
'displayPracaRamos': function(data) {
console.log('displayPracaRamos:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayPracaCidadeMilao': function(data) {
console.log('displayPracaCidadeMilao:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayCameraCasteloBranco1': function(data) {
console.log('displayCameraCasteloBranco1:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayCameraCasteloBranco2': function(data) {
console.log('displayCameraCasteloBranco2:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayAlarmsMarker': function(data) {
console.log('displayAlarmsMarker:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'displayAlarmsMarker': function(data) {
console.log('displayAlarmsMarker:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'showPois': function(data) {
console.log('showPois:');
console.log(data); // Aqui vc faz o que quiser com o item
},
'toggleFullScreen': function(data) {
console.log('toggleFullScreen:');
console.log(data); // Aqui vc faz o que quiser com o item
}
};
// Função que monta o menu
function montaMenu(data) {
data.items.reverse().forEach(function(item) {
var ul = document.querySelector('nav.navbar ul');
var li = document.createElement('li');
var a = document.createElement('a');
var spanTitle = document.createElement('span');
var spanIcon = document.createElement('span');
spanTitle.classList.add('desc');
spanTitle.classList.add('animate');
spanTitle.innerText = item.title;
spanIcon.classList.add('glyphicon');
spanIcon.classList.add(item.icon);
a.classList.add('animate');
a.appendChild(spanTitle);
a.appendChild(spanIcon);
li.appendChild(a);
item.onclickFunctions.forEach(function(func) {
var menuFunc = menuFunctions[func];
li.addEventListener('click', function() {
menuFunc(item);
});
});
ul.insertBefore(li, ul.childNodes[0]);
});
};
montaMenu(jsonObject); // Aqui você chama a função que monta o menu
<nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation">
<div class="navbar-toggler animate">
<span class="menu-icon"></span>
</div>
<ul class="navbar-menu animate">
<li>
<a href="/PracaInteligente/login" class="animate"> <span class="desc animate"> Sair </span> <span class="glyphicon glyphicon glyphicon-log-out"></span>
</a>
</li>
</ul>
</nav>
Fica bem dinâmico inclusive você usa o próprio item como parâmetro da função caso precise passar algum parâmetro pra função. Outro detalhe é que não utiliza nenhuma biblioteca externa como o JQuery por exemplo.
Espero ter ajudado! Qualquer dúvida é só me perguntar.
Abraço!
-
ficou muito bom!! Só uma coisa, eu usei o json e a função para montar o menu, só não utilizei as funções atribuidas ao menu, pq elas já existem em outro arquivo. Importei no meu html, primeiro o json e abaixo a função que cria o menu. E no body coloquei o trecho do html que você colocou(no caso a parte do nav) mas ele não montou o restante do meu, apenas aparece o botão fixo(sair) sabe o que pode ser?– IsaCommented 30/10/2017 às 18:42
-
ele dá esse erro no console:Uncaught TypeError: Cannot read property 'insertBefore' of null at menuDinamico.js:103 at Array.forEach (<anonymous>) at montaMenu (menuDinamico.js:76) at menuDinamico.js:107– IsaCommented 30/10/2017 às 18:48
-
Pelo erro que me passou, parece que o ul está null ou seja, o document.querySelector não está encontrando a lista. Commented 30/10/2017 às 18:54
-
1Certifique-se que este código só irá rodar depois que os outros arquivos js e também o html já foram carregados. Commented 30/10/2017 às 18:55
Uma forma de fazer isso seria assim (não posso dizer que é a melhor forma).
let json = [
{
title: "Função Teste",
funcName: "teste()"
},
{
title: "Função Exibir nome",
funcName: "exibirNome()"
},
{
title: "Função comida favorita",
funcName: "comidaFavorita()"
},
{
title: "Função melhor serie",
funcName: "melhorSerie()"
}
]
function menu(){
for(let i = 0; i < json.length; i++){
$('nav ul').append('<li><a href="#" data-func="'+json[i].funcName+'" onclick="'+json[i].funcName+'">'+json[i].title+'</a></li>')
}
}
menu()
function teste(){
alert('f')
}
function exibirNome(){
alert('meu nome é Rafael')
}
function comidaFavorita(){
alert('Minha comida favoria é X-Bacon')
}
function melhorSerie(){
alert('Game Of Thrones')
}
<nav>
<ul>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Como pode ver no exemplo, a partir de um json
eu monto o menu com as respectivas funções
.