Menu Accordion com JQuery

Bem pessoas, o fato qual me levou a desenvolver este menu foi a necessidade de manter um controle no mesmo, podendo fechar e abrir o mesmo item do submenu, tudo isso usando ul li, direto ao ponto.

Primeira coisa a fazer, como verificar qual menu estava aberto antes do reload?
A solução para isso foi gravar o menu em cookie para verificação, segue abaixo as funções para criar e recuperar o cookie.

Função para recuperar o cookie:

/**
 * Retorna o valor do cookie
 * @autor Deusimar Ferreira 
 * @param string name
 */
getCookie = function(Name){ 
	var re=new RegExp(Name+"=[^;]+", "i");
	if (document.cookie.match(re))
		return document.cookie.match(re)[0].split("=")[1];
	return null;
}

Função para criar e setar o valor do cookie:

/**
 * Define cookie
 * @autor Deusimar Ferreira 
 * @param string name
 * @param string|int value
 */
setCookie = function(name, value){
	document.cookie = name + "=" + value;
}

Cirei um atributo para meu submenu chamado de menuIndex.

// Pega submenus 
var subContents = $('#menu li ul');
				
// Percorre o menu e adiciona indice
$("#menu li div a").each(function(index) {
	subContents.eq(index).attr({menuIndex: index + 'c'});
})

Este script contém os eventos accordion do menu, ele faz a verificação de qual submenu esta aberto e chama o evento, caso o item clicado esteja aberto ele será fechado ou inverso, caso seja outro item ele abre o item clicado e fecha os outros itens.

$("div a").click(function() {
	//$("#menu li ul:visible").slideUp("slow"); // Esocnde menu item que visivel
	//$(this).parent().next().slideToggle("slow"); // Mostra o menu item que recebeu o evento click		
	
	// Criar objeto gobal do parent span a 
	var _this = $(this).parent().next();
	
	// Percorre o menu para verificar as ações que deve ser executada
	// Verifica qual submenu deve ser fechado e qual será aberto
	$("div a").each(function(index){
		if ($('#menu li ul:eq(' + index + ')').attr('menuIndex') != _this.attr('menuIndex')) {
			// Verifica se exite algum submenu que não seja o que recebeu o evento do click aberto
			if ($('#menu li ul:eq(' + index + ')').is(':visible')) 
				$('#menu li ul:eq(' + index + ')').slideUp("slow"); // Esocnde submenu item que visivel
		} else {				
			(_this.is(':visible')) ? _this.slideUp("slow") // Esocnde submenu item que visivel
					       : _this.slideDown("slow"); // Mostra o submenu item que recebeu o evento click
		}
	})
	
	// Retorna falso funciona como um pause
	return false;
})

Neste outro script ao fechar a página ele recuperar o índice do menu e cria um cookie com seu valor.

// Evento window unload
$(window).bind('unload', function(){
	$('#menu li ul').unbind(); // Remove eventos
	var expandeIndices = []; // Array indice
	
	$("#menu li ul:visible").each(function(index){ 
		// Insere o valor do menuindex no array
		expandeIndices.push($(this).attr('menuIndex'));
	})
	
	expandeIndices = (expandeIndices.length == 0) ? '-1c' : expandeIndices;
	setCookie('menuIndex', expandeIndices); // Seta o cookie e seu respectivo valor
})

Pega o valor do cookie e mantém o respectivo submenu aberto.

// Verifica o cookie para ver qual submenu deve ser mostrado
$("#menu li ul").each(function(){
        // Mostra o submenu
	if ($(this).attr('menuIndex') == getCookie('menuIndex')) {
		$(this).show();
	} else { // Esconde o restante
		$(this).hide();
	}
})

Eis o script completo:

$(document).ready(function() {				 
	/**
	 * Retorna o valor do cookie
	 * @autor Deusimar Ferreira 
	 * @param string name
	 */
	getCookie = function(Name){ 
		var re=new RegExp(Name+"=[^;]+", "i");
		if (document.cookie.match(re))
			return document.cookie.match(re)[0].split("=")[1];
		return null;
	}
	
	/**
	 * Define cookie
	 * @autor Deusimar Ferreira 
	 * @param string name
	 * @param string|int value
	 */
	setCookie = function(name, value){
		document.cookie = name + "=" + value;
	}
	
	/**
	 * Accordion Menu
	 * @autor Deusimar Ferreira 
	 * @param #menu li ul
	 * @param #menu li div a
	 */
	if (typeof expandeIndices == 'string')
		expandeIndices = expandeIndices.replace(/c/ig, '').split(',') // Transfoma string value em array (ie: "c1,c2,c3" becomes [1,2,3]
	
	// Pega submenus 
	var subContents = $('#menu li ul');
	
	// Percorre o menu e adiciona indice
	$("#menu li div a").each(function(index) {
		subContents.eq(index).attr({menuIndex: index + 'c'});
	})
	
	// Apresenta apenas o primeiro menu list
	$('#menu li ul:not(:first)').hide();
	$("div a").click(function() {
		//$("#menu li ul:visible").slideUp("slow"); // Esocnde menu item que visivel
		//$(this).parent().next().slideToggle("slow"); // Mostra o menu item que recebeu o evento click		
		
		// Criar objeto gobal do parent span a 
		var _this = $(this).parent().next();
		
		// Percorre o menu para verificar as ações que deve ser executada
		// Verifica qual submenu deve ser fechado e qual será aberto
		$("div a").each(function(index){
			if ($('#menu li ul:eq(' + index + ')').attr('menuIndex') != _this.attr('menuIndex')) {
				// Verifica se exite algum submenu que não seja o que recebeu o evento do click aberto
				if ($('#menu li ul:eq(' + index + ')').is(':visible')) 
					$('#menu li ul:eq(' + index + ')').slideUp("slow"); // Esocnde submenu item que visivel
			} else {				
				(_this.is(':visible')) ? _this.slideUp("slow") // Esocnde submenu item que visivel
									   : _this.slideDown("slow"); // Mostra o submenu item que recebeu o evento click
			}
		})
		
		// Retorna falso funciona como um pause
		return false;
	})		
	
	// Evento window unload
	$(window).bind('unload', function(){
		$('#menu li ul').unbind(); // Remove eventos
		var expandeIndices = []; // Array indice
		
		$("#menu li ul:visible").each(function(index){ 
			// Insere o valor do menuindex no array
			expandeIndices.push($(this).attr('menuIndex'));
		})
		
		expandeIndices = (expandeIndices.length == 0) ? '-1c' : expandeIndices;
		setCookie('menuIndex', expandeIndices); // Seta o cookie e seu respectivo valor
	})		
	
	// Verifica o cookie para ver qual submenu deve ser mostrado
	$("#menu li ul").each(function(){
		if ($(this).attr('menuIndex') == getCookie('menuIndex')) { // Mostra o submenu
			$(this).show();
		} else { // Esconde o restante
			$(this).hide();
		}
	})
})

Folha de estilo css:

div {
	font-family: Verdana, Arial;
	font-size: 11px;
	font-weight: bold;
	margin: 1px 0px;
	padding: 0px;
	border: 1px #06c solid;
	background-color: gray;
}

ul {
	list-style-type: none;
	max-width: 202px;
	_width: 200px; /* Adivinha para quem serve essa linha - Claro que é o IE! */
}

#menu li {
	margin: 0px 0px;
}

#menu li ul{
	margin: 0px;
	padding: 1px 5px;
	display: none;
}

#menu li div a{				
	text-decoration: none;
	outline: none;
	line-height: 18px;
	padding: 1px 4px;
	color: white;
}

a {				
	font-family: Verdana, Arial;
	font-size: 11px;
	text-decoration: none;
	outline: none;
	padding: 1px 4px;
	color: #06c;
}

a:hover {				
	font-family: Verdana, Arial;
	font-size: 11px;
	text-decoration: underline;
	outline: none;
	padding: 1px 4px;
	color: #06c;
}

Estrutura do menu em lista não ordenada, ul li:

<ul id="menu">
	<li>
		<div><a href="">JQuery Documentation</a></div>
		<ul id="submenu">
			<li><a href="http://docs.jquery.com/Main_Page" target="blank" title="Documentation">Documentation</a></li>
			<li><a href="http://docs.jquery.com/Tutorials" target="blank" title="Tutrorials">Tutrorials</a></li>
		</ul>
	</li>
	
	
	<li>
		<div><a href="">Player Game</a></div>
		<ul id="submenu">
			<li><a href="http://www.cdt.unb.br/memoria" title="Memória Empreendedora">Memória Empreendedora</a></li>
			<li><a href="" title="Memória Empreendedora">Memória Empreendedora</a></li>
		</ul>
	</li>
	
	<li>
		<div><a href="">Sobre</a></div>
		<ul id="submenu" style="border-bottom: 1px #06c solid;">
			<li><a href="https://zimar.wordpress.com/about/" title="Sobre Me">Sobre Me</a></li>
			<li><a href="http://docs.google.com/View?docid=ddft82q4_42hmpmmcgv" title="Curriculum">By Curriculum</a></li>
		</ul>
	</li>
</ul>

é isso ai, qualquer dúvida, pergunte!

Retira acentos, função em js

Boa tarde,

Nessa tarde tive a necessidade de retirar acentos em palavras para gerar um codigo, que reune, quatro digitos numéricos, primeiro nome da pessoa e ano corrente, como existem varios nomes com acentos como José, João entre outros, criei esta função em javascript que troca os caracteres acentuados por caracteres sem acento e o retorna em caixa alta.

Ex:
O nome joão ficará assim – JOAO

Utilizei como base a função feita pelo João Melo.

function strReplaceChr(texto) {
	var chrEspeciais = new Array("á", "à", "â", "ã", "ä", "é", "è", "ê", "ë", 
				     "í", "ì", "î", "ï", "ó", "ò", "ô", "õ", "ö", 
				     "ú", "ù", "û", "ü", "ç", 
				     "Á", "À", "Â", "Ã", "Ä", "É", "È", "Ê", "Ë", 
				     "Í", "Ì", "Î", "Ï", "Ó", "Ò", "Ô", "Õ", "Ö", 
				     "Ú", "Ù", "Û", "Ü", "Ç");
	var chrNormais = new Array("a", "a", "a", "a", "a", "e", "e", "e", "e", 
				   "i", "i", "i", "i", "o", "o", "o", "o", "o",
				   "u", "u", "u", "u", "c", 
				   "A", "A", "A", "A", "A", "E", "E", "E", "E",
				   "I", "I", "I", "I", "O", "O", "O", "O", "O",
				   "U", "U", "U", "U", "C");
	for (index in chrEspeciais) {
		texto = texto.replace(chrEspeciais[index], chrNormais[index]);
	}
	
	return texto.toUpperCase();
}

Ajax com jQuery

Bem galera,
iniciando uma serie de artigos sobres esta fabulosa biblioteca js, o jQuery. Para fazer o download acesse jQuery.

Mãos na massa:

Primeiro vamos criar a nossa função que ira pegar os dados do formúlario e enviar via ajax, neste exemplo usarei a função $.post(url, data, callback).

$(document).ready(function() {				
	$("#submit").click(function(){
		// Mostra tela Loding
		$('#loading').ajaxStart(function(){
			$(this).show();
		});
		
		$.post('jQuery.php', {
			nome: $('#nome').val(),
			email: $('#email').val(),
			tel: $('#tel').val()
		}, function(response) {
			$('#result').html(unescape(response));
			$('#result').fadeIn();
		});
		
		// Esconde Loading
		$("#loading").ajaxSuccess(function(){
			$(this).hide();
		});
		
		return false;
	});
})

Pega os parametos enviados pelo formulário, jQuery.php.

<?php
// Extrai os POST
extract($_POST);

// Mostra dados
echo "
Nome: " . $nome;
echo "
Email: " . $email;
echo "
Tel: " . $tel;
?>

Função criar elemento input usando DOM

Este exemplo foi criado a partir da necessidade num projeto que fiz, onde tinha arquivos que seria livres e outros privados.

Neste exemplo mostro como criar um campo input ao click em um link ou botão.

Função que cria o elemento DOM

/**
 * Função criar componente usando DOM
 * Evento onclick
 * @author Deusimar Ferreira 
 */
function criaElemento() {
  // Verifica se já foi criado o elemento
  if(!document.getElementById('labelInput')){        
    // Label area senha
    var labelInput = document.createElement('label'); // Cria um elemento label
    labelInput.innerHTML = 'Senha: '; // Define o texto
    labelInput.id = 'labelInput'; // Define ID
    
    // Input type password
    var input = document.createElement('input'); // Cria um elemento input
    input.type = 'password'; // Define o tipo como password
    input.name = 'senha'; // Define o nome como senha
    input.id = 'senha'; // Define o Id com senha
    input.size = '10'; // Define o tamanho para 10

    labelInput.appendChild(input); // Adiciona o input ao label
    document.body.appendChild(labelInput); // Adiciona o label ao corpo do documento
  }
}

Função que remover o elemento DOM

/**
 * Função remove componente 
 * Evento onclick
 * @author Deusimar Ferreira 
 */
function removeElemento() {
  document.body.removeChild(document.getElementById('labelInput')); // Remove os elementos do corpo do documento
}