[Resolvido] JQuery click event

[Durbano 1]

Boa noite senhores,

 

Visualizem o seguinte, tenho um menu e neste menu há vários itens então sempre que clicar será feito um FADEOUT no conteudo e em seguinte abrirá uma nova página.

 

Estou com um problema para deixar isto dinâmico.Segue o código abaixo.

Verifiquem que a página contato.php está hard code

 

$('#navigationMenu').click

(

function()

{

$('#content').fadeOut

(

'slow'

,function () {document.location.href = "index.php?PageName=" + "contato.php";}

);

}

);

 

Esta parte em negrito deveria variar de acordo com o que eu selecionar no menu,alguma ideia ?

 

 

 

Obrigado desde já !

[allex_carvalho 124]

Bom... Se essa #navigationMenu for a ul, tente assim:

 

$('#navigationMenu a').click(function(){
	var href = $(this).attr("href");
	$('#content').fadeOut('slow',function (){
		document.location.href = "index.php?PageName=" + href;
	});
});

[Durbano 1]

Bom dia Allex !

 

O #navigationMenu é uma UL no qual está todos os itens(links, LI) do menu.

Então eu precisaria identificar em qual ITEM foi clicado para que eu possa deixar dinâmico, eu achei uma saída mas não é a mais agradável segue abaixo:

 

       <div id="menu">
           <ul id="navigationMenu">
               <li>
                   <a id="navigationMenuHome" class="home" href="#">
                   <span>Home</span>
                   </a>
               </li>
               <li>
                   <a id="navigationMenuContato" class="contact" class="contact" href="#">
                       <span>Contato</span>
                   </a>
               </li>

<script>	
$('#navigationMenuHome').click
(
	function() 
	{
		$('#content').fadeOut
		(
			'slow'
			,function () {document.location.href = "index.php?PageName=" + "home.php";}
		);
	}
);

	$('#navigationMenuContato').click
(
	function() 
	{
		$('#content').fadeOut
		(
			'slow'
			,function () {document.location.href = "index.php?PageName=" + "contato.php";}
		);
	}
);

</script>  

 

Verifique que tive que praticamente duplicar o evento.

 

Tem mais alguma ideia ?

[allex_carvalho 124]

Tentou da forma que citei na primeira resposta:

 

$('#navigationMenu a').click(function(){
               var href = $(this).attr("href");
               $('#content').fadeOut('slow',function (){
                       document.location.href = "index.php?PageName=" + href;
               });
       });

[Durbano 1]

Opa tentei sim, mas sem sucesso.

 

Apenas para explicar o fluxo.

 

HTML Clico no Botão HOME(item do menu LI) >>

JS ele dispara o evento CLICK >>

JS faz o FADE OUT do conteudo >>

JS passa uma variavel metódo GET >>

PHP faz o include da página passada via parâmetro

 

se eu tentar fazer do modo como você diz, eu deveria colocar um LINK no HREF do botão HOME para página HOME, mas quando eu clico no botão HOME ele executa o evento mas não o efeito FADE OUT e carrega a página.

 

valeu pela ajuda...mas outra ideia :)/>/> ?

[allex_carvalho 124]

Tente assim então:

 

$('#navigationMenu a').click(function(event){
               event.preventDefault();
               var href = $(this).attr("href");
               $('#content').fadeOut('slow',function (){
                       document.location.href = "index.php?PageName=" + href;
               });
       });

[Durbano 1]

Caraaa você acabou de me dar um ideia e funcionou !

 

segue o código abaixo:

 

       <div id="menu">
           <ul id="navigationMenu">
               <li>
                   <a id="navigationMenuHome" class="home" PageName="home.php" href="#">
                   <span>Home</span>
                   </a>
               </li>

               <li>
                   <a id="navigationMenuContato" class="contact" PageName="contato.php" href="#">
                       <span>Contato</span>
                   </a>
               </li>

<script>	
$('#navigationMenu a').click
(
	function() 
	{
		var PageName = $(this).attr("PageName");
		$('#content').fadeOut
		(
			'slow'
			,function () {document.location.href = 'index.php?PageName=' + PageName;}
		);
	}
);
</script> 

 

Dentro dos links criei um atributo que se chama PageName o valor dele é o nome da página, ai peguei este valor lá no JS var PageName = $(this).attr("PageName"); e coloquei a variável no valor passado via URL document.location.href = 'index.php?PageName=' + PageName;

 

Valeu Alex !!!