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="http://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!

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();
}

Eis mais um acrescimo para meu portfolio, este game foi desenvolvido na plataforma web, usando, PHP5, Mysql e Ajax. A finalidade deste aplicativo é auxiliar no aprendizado e inclusão digital de empreendedores.

Este projeto foi desenvolvido pelo Centro de Apoio ao Desenvolvimento Tecnológico – CDT/UnB em parceria com o Ministério do Desenvolvimento, Indústria e Comércio Exterior.

Visite www.cdt.unb.br/memoria, e divirta-se.

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;
?>

Unidos para que o Firefox 3 bata o récorde mundial de download.

Abracem esta idéia!

A finalidade deste exemplo é mostra para os iniciantes em ajax como é simples efetuar uma requisição usando o ajax.

A primeira coisa a fazer é verificar se o browser do cliente suporta o ajax e instânciar o objeto.

var ajax;
try {
  // Verifica se o Firefox, Opera 8.0+, Safari suporta o ajax
  ajax = new XMLHttpRequest();
} catch (e) {
  // Verifica se o Internet Explorer suporta o ajax
  try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      alert("Seu browser não dar suporte ao AJAX!");
      return false;
    }
  }
}

Agora vamos processar nosso ajax, observe que neste exemplo estamos tratando o readyState 4, que seguinifica que a requisição foi bem sucedida.

// Processa requisição ajax
ajax.onreadystatechange = function() {
  if(ajax.readyState == 4) {
    document.getElementById('campoResposta').innerHTML = ajax.responseText;
  }
}
ajax.open('POST', 'time.php', true);
ajax.send(null);

Neste exemplo o ajax requisita uma página que contém uma função date(‘H:i:s’)
time.php

date('H:i:s')

Agora juntamos as partes do objeto ajax em uma função para efetuarmos a requisição.

function ajaxSend() {
  var ajax;
  try {
    // Firefox, Opera 8.0+, Safari
    ajax = new XMLHttpRequest();
  } catch (e) {
      // Internet Explorer
      try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Seu browser não dar suporte ao AJAX!");
          return false;
        }
      }
  }

  // Processa requisição ajax
  ajax.onreadystatechange=function() {
    if(ajax.readyState == 4) {
      document.getElementById('time').innerHTML = 'Time: ' + ajax.responseText;
    }
  }
  ajax.open('POST', 'time.php', true);
  ajax.send(null);
}

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
}

Bem galeira, esta função faz um auto-preenchimento em uma determinada string.

Ex: tenho um campo que seria obrigatório ter 4 digitos, mas ele poderia receber valores com uma, duas, três ou quatro digitos, ae surgiu a ideia de fazer um preenchimento no campos caso o valor recebido fosse menor que 4 espaços, dei uma Googlezada e encotrei esta função que equivale a str_pad do PHP, fiz apenas uma alteração, pois quando inseria um valor númerico a função não reconhecia, a solução foi fazer com que os valores de entrada sejam transformados em uma string.

Você tem as seguintes opções:
STR_PAD_RIGHT, STR_PAD_LEFT ou STR_PAD_BOTH, caso não seja definido na chamada da função o parametro pad_type ele assume como default o valor ‘STR_PAD_RIGHT’.

Veja:
o valor de entrada para este exemplo será 8, a quantidade de espaço a ser preenchido será 4 e o valor adicionado é 0.

//Preenche a esquerda.
document.write(str_pad(8, 4, 0, 'STR_PAD_LEFT'))
//resultado: 0008

//Preenche nas duas extremidades.
document.write(str_pad(8, 4, 0, 'STR_PAD_BOTH'))
//resultado: 0080

//Preenche a direita.
document.write(str_pad(8, 4, 0, 'STR_PAD_RIGHT'))
//resultado: 8000

/**
 * @credits http://kevin.vanzonneveld.net
 * original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
 */
function str_pad( input, pad_length, pad_string, pad_type ) {
    var input = this.String(input);

    var half = '', pad_to_go;

    function str_pad_repeater(s, len){
        var collect = '', i;

        while(collect.length  0) {
        if (pad_type == 'STR_PAD_LEFT') { input = str_pad_repeater(pad_string, pad_to_go) + input; }
        else if (pad_type == 'STR_PAD_RIGHT') { input = input + str_pad_repeater(pad_string, pad_to_go); }
        else if (pad_type == 'STR_PAD_BOTH') {
            half = str_pad_repeater(pad_string, Math.ceil(pad_to_go/2));
            input = half + input + half;
            input = input.substr(0, pad_length);
        }
    }

    return input;
  }

Esta função traz uma solução simples para campos de formularios
que requerem apenas números.

/**
* Função que permite inserir apenas número
* Pega o evento do teclado onKeyPress.
* @param obj
* @author Deusimar Ferreira
*/
function soNum(obj) {
  // Remove tudo o que não for 1, 2, 3, 4, 5, 6, 7, 8, 9
  obj.value = obj.value.replace(/[^0123456789]/g, '');
}

Site da Agência e Asssessoria de Comunicação Liberdade de Expressão, desenvolvido em php e javascript, baseado nos padrões adotados pela W3C.

Projeto de Interface desenvolvida por, Yoda Nakasu.