[Resolvido]Função Java Script Menu

[Anderson Silva01]

ola galera Sou novo na programação Web na verdade sou programador Cobol.

o que acontece é o seguinte: tenho um sistema que fiz pra oficina mecânica do meu pai.

nesse sistema utilizo um menu de abas feito em html+ CSS

o que acontece é que eu estou tentando colocar esse menu dentro de um java Script para não ter que repeti-lo em todas as paginas

segue o menu :

<ul id='menu'>

<li><a href='Home.php' title=''>Home</a></li>

<li><a href='#' title='' class='current'>Clientes</a></li>

<li><a href='cad_fornecedor.php' title=''>Fornecedores</a></li>

<li><a href='cad_pecas.php' title=''>Pecas</a></li>

<li><a href='cad_veiculos.php' title=''>Veiculos</a></li>

<li><a href='cad_contas.php' title=''>Contas</a></li>

<li><a href='cad_usuarios.php' title=''>Usuarios</a></li>

<li><a href='cad_funcionarios.php' title=''>Funcionarios</a></li>

</ul>

dentro do java script ficou assim:

document.write(

"<ul id='menu'>"+

"<li><a href='Home.php' title=''>Home</a></li>"+

"<li><a href='#' title='' class='current'>Clientes</a></li>"+

"<li><a href='cad_fornecedor.php' title=''>Fornecedores</a></li>"+

"<li><a href='cad_pecas.php' title=''>Pecas</a></li>"+

"<li><a href='cad_veiculos.php' title=''>Veiculos</a></li>"+

"<li><a href='cad_contas.php' title=''>Contas</a></li>"+

"<li><a href='cad_usuarios.php' title=''>Usuarios</a></li>"+

"<li><a href='cad_funcionarios.php'title=''>Funcionarios</a></li>"+

"</ul> ");

até ai tudo bem funciona eu incluo o java script dentro de uma pagina html

assim: &lt;script src='Menu.js'> </script> e ele roda normal

o problema está que eu precisava que o codigo fosse mais ou menos assim:

function ImprimeMenu(aba){

document.write(

"<ul id='menu'>"+

"<li><a href='Home.php' title=''>Home</a></li>"+

"<li><a href='#' title='' class='current'>Clientes</a></li>"+

"<li><a href='cad_fornecedor.php' title=''>Fornecedores</a></li>"+

"<li><a href='cad_pecas.php' title=''>Pecas</a></li>"+

"<li><a href='cad_veiculos.php' title=''>Veiculos</a></li>"+

"<li><a href='cad_contas.php' title=''>Contas</a></li>"+

"<li><a href='cad_usuarios.php' title=''>Usuarios</a></li>"+

"<li><a href='cad_funcionarios.php 'title=''>Funcionarios</a></li>"+

"</ul> ");

}

porque através da variável "aba" eu farei com que a aba selecionada fique em destaque.

setando class ='current'.

se eu chamo a função dessa maneira &lt;script src='Menu.js'> var tab="clientes"; ImprimeMenu(tab);</script>

o menu não aparece.

Edited October 31, 2012 by Anderson Silva01

[Cristian Madrid]

Não entendi muito bem a sua dúvida, pode colocar um trecho do seu código ??

Segue um exemplo de como passar uma var por parametro para uma function

function Pessoa(nome){
    this.nome = nome;
    //
}

[Anderson Silva01]

Então o código é o que postei acima,l talvez o problema não seja na passagem do parâmetro pelo menos eu acho. porque o menu deixa de ser exibido quando eu coloco ele

dentro de uma function.

[Cristian Madrid]

Segue o script

<script type="text/javascript">
    window.addEventListener('load',function(){
        var menu = document.getElementById('menu');
        addCurrent(menu);
    },false)

    var addCurrent = function(elemen){
        var filhos = elemen.getElementsByTagName('li');
            
        for(i=0;i<filhos.length;i++)
        {
            filhos[i].getElementsByTagName('a')[0].onclick = function(){
                clearCurrent(filhos);
                this.setAttribute('class','current');
            }
        }

    }
    var clearCurrent  = function(elemen){
        for(i=0;i<elemen.length;i++)
        {
           elemen[i].getElementsByTagName('a')[0].setAttribute('class','');
        }   
    }
</script>

* Sempre que puder evitar de usar o document.write() evite ;)

Neste Script eu estou adicionando em todas as tags <a> o evento onclick, onde neste evento eu chamo um outro metodo que limpa de todos as class 'current' das tags a do menu e insiro a class 'current' na tag clicada.

Edited October 31, 2012 by Cristian Madrid

[Anderson Silva01]

Segue o script

<script type="text/javascript">
    window.addEventListener('load',function(){
        var menu = document.getElementById('menu');
        addCurrent(menu);
    },false)

    var addCurrent = function(elemen){
        var filhos = elemen.getElementsByTagName('li');
            
        for(i=0;i<filhos.length;i++)
        {
            filhos[i].getElementsByTagName('a')[0].onclick = function(){
                clearCurrent(filhos);
                this.setAttribute('class','current');
            }
        }

    }
    var clearCurrent  = function(elemen){
        for(i=0;i<elemen.length;i++)
        {
           elemen[i].getElementsByTagName('a')[0].setAttribute('class','');
        }   
    }
</script>

cara se não for pedir muito você poderia me explicar por cima qual foi seu raciocino para que eu possa entender o que estou implementando.

[Cristian Madrid]

var clearCurrent  = function(elemen){
        for(i=0;i<elemen.length;i++)
        {
           elemen[i].getElementsByTagName('a')[0].setAttribute('class','');
        }   
    }

Aqui eu criei uma function que recebe um parametro e percorre todos os filhos deste elemento de tag <a> e tira a class: Vamos verificar como a função se comporta no seguinte exemplo; Antes:

<li><a class='current'>1</a></li>
<li><a class=''>2</a></li>
<li><a class=''>3</a></li>

Depois:

<li><a class=''>1</a></li>
<li><a class=''>2</a></li>
<li><a class=''>3</a></li>

---------------------------------------------------------

var addCurrent = function(elemen){
        var filhos = elemen.getElementsByTagName('li');
            
        for(i=0;i<filhos.length;i++)
        {
            filhos[i].getElementsByTagName('a')[0].onclick = function(){
                clearCurrent(filhos);
                this.setAttribute('class','current');
            }
        }

    }

Esta função recebe um parametro e percorre todos os filhos de tag <a> e adiciona um evento onclick ( ao dar um click dispara algo o/) onde, chama a func clearCurrent (para limpar todos os current) e adiciona um class no elemento clicado o/. ----------------------------------------------------------------

window.addEventListener('load',function(){
        var menu = document.getElementById('menu');
        addCurrent(menu);
    },false)

Aqui eu adiciono um evento que vai ser executado ao carregar a pagina, onde dentro da funcao eu crio uma var menu, passando para ela o elemento pai de todos ('ó todo poderoso menu') e posteriormente chamo a func addCurrent passando o menu (ó elemento pai de todos) ;

Do you understand ?

[Anderson Silva01]

só não entendi onde exatamente eu monto o meu menu dentro da função que você escreveu.

Bom se tudo ocorrer da maneira que você escreveu fica muito melhor pois a aba será destacada através de um evento e não mais na mão como eu fazia pagina a pagina

abaixo o css do menu:

ul#menu {
    width: 100%;
    height: 43px;
    background: #FFF url("images1/menu-bg.gif") top left repeat-x;
    font-size: 0.8em;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#menu li {
    display: block;
    float: left;
    margin: 0 0 0 5px;
}
ul#menu li a {
    height: 22,1px;
    color: black;
    text-decoration: none;
    display: block;
    float: left;
    line-height: 200%;
    padding: 8px 4.7px 0;
}
ul#menu li a:hover {
    color: #333;
}
ul#menu li a.current {
    color: black;
    background: #FFF url("images1/current-bg.gif") top left repeat-x;
    padding: 8px 15px 0;
}

Abaixo o meu, esse estava sendo utilizado an tela Cadastro_clientes: como era utilizado antes do java script:

<link rel='stylesheet' href='menu_style.css' type='text/css' media='screen' />

<ul id='menu'>
<li><a href='Home.php'                    title=''>Home</a></li>
<li><a href='#'                    title='' class='current'>Clientes</a></li>
<li><a href='cad_fornecedor.php'  title=''>Fornecedores</a></li>
<li><a href='cad_pecas.php'       title=''>Pecas</a></li>
<li><a href='cad_veiculos.php'    title=''>Veiculos</a></li>
<li><a href='cad_contas.php'      title=''>Contas</a></li>
<li><a href='cad_usuarios.php'    title=''>Usuarios</a></li>
<li><a href='cad_funcionarios.php'title=''>Funcionarios</a></li>
</ul>

[Cristian Madrid]

Esse menu fica somente no HTML, ele vai fazer a troca de class, que é só o que você precisa o/

Só que você tem um problema é que quando você da um post na pagina o javascript sempre vai retornar ao seu estado inicial :( , há maneiras de contornar isso.

[Anderson Silva01]

Cristian. Muito obrigado do modo que você colocou eu consegui implementar.

está funcionando e ficou muito melhor que antes.

referente ao defeito eu posto novamente se ocorrer

o meu arquivo que contem o menu ficou assim:

embora você tivesse falado pra evitar o document.write. eu não sei como substitui-lo nesse caso.

window.addEventListener('load',function(){
        var menu = document.getElementById("menu");
        addCurrent(menu);
    },false)

    var addCurrent = function(elemen){
        var filhos = elemen.getElementsByTagName('li');
            
        for(i=0;i<filhos.length;i++)
        {
            filhos[i].getElementsByTagName('a')[0].onclick = function(){
                clearCurrent(filhos);
                this.setAttribute('class','current');
            }
        }

    }
    var clearCurrent  = function(elemen){
        for(i=0;i<elemen.length;i++)
        {
           elemen[i].getElementsByTagName('a')[0].setAttribute('class','');
        }   
    }
document.write(
"<link rel='stylesheet' href='menu_style.css' type='text/css' media='screen' />"+
"<ul id='menu'>"+
"<li><a href='Home.php' title=''>Home</a></li>"+
"<li><a href='#'        title='' >Clientes</a></li>"+
"<li><a href='#'        title=''>Fornecedores</a></li>"+
"<li><a href='#'        title=''>Pecas</a></li>"+
"<li><a href='#'        title=''>Veiculos</a></li>"+
"<li><a href='cad_contas.php'      title=''>Contas</a></li>"+
"<li><a href='cad_usuarios.php'    title=''>Usuarios</a></li>"+
"<li><a href='cad_funcionarios.php'title=''>Funcionarios</a></li>"+
"</ul> ");