12 de maio de 2008

Microformat: Hide / Show objects – div, ul etc.

Javascript | 2 Comentários »
por Ricardo José Corrêa

Meu amigo Fábio Arantes desenvolveu um microformato muito interessante: o HideShow.

Basta você inserir o arquivo hideshow.js em seu HTML e quando quiser fazer o sempre útil hide/show em um objeto (div, ul etc.), basta colocar um id no objeto e no link acrescentar rel=”hideShow|nomeId”.

Fácil, fácil. :)

hideshow.js

//////////////////////////////////////////////////////////////////////////
/////////////////////////Hide Show Microformat.../////////////////////////
///////////////////Created by Fábio Arantes dos Santos////////////////////
////////////////////////http://www.fabioarantes.com///////////////////////
////////////////Tested in Firefox and IE6 Works Perfectly/////////////////
//////////////////////////////////////////////////////////////////////////
/////////////////////////////////EXAMPLE://///////////////////////////////
//////////////////////////////////////////////////////////////////////////
/*
<script language="JavaScript" type="text/javascript" src="hideshow.js">
</script>
 
<h3><a href="#" rel="hideShow|DivIdName">Div Title</a></h3>
<div id="DivIdName">
Div Content
</div>
 
<h3><a href="#" rel="hideShow|UlIdName">Ul Title</a></h3>
<ul id="UlIdName">
	<li>List Content 01</li>
	<li>List Content 02</li>
	<li>List Content 03</li>
</ul>
*/
//////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
 
 
var hideShow = new Object();
var listElement = new Array();
var active = "";
hideShow.show = function () {
	if(active == arguments[0]){
		document.getElementById(arguments[0]).style.display = "none";
		active = "";
	} else {
		hideShow.hide();
		for(i=0; i<arguments.length; i++){
			document.getElementById(arguments[i]).style.display = "block";
			active = arguments[i];
		}
	}
}
hideShow.hide = function (){
	for(i=0; i<listElement.length; i++){
		document.getElementById(listElement[i]).style.display = "none";
	}
}
hideShow.initialize = function () {
	var links = document.getElementsByTagName('a');
	for(i=0; i<links.length; i++){
		var str = links[i].rel.split('|')
		if(str[0] == "hideShow"){
			listElement.push(str[1]);
			links[i].href = "javascript: hideShow.show('"+str[1]+"');";
		}
	}
	hideShow.hide();
}
 
function StartApplets() {
	hideShow.initialize();
}
if(navigator.appName != "Microsoft Internet Explorer"){
	document.addEventListener( "DOMContentLoaded", StartApplets, false );
} else {
	setTimeout("hideShow.initialize()", 0);
}


28 de fevereiro de 2007

Simplesmente XOXO

Javascript | 1 Comentário »
por Ricardo José Corrêa

Se você:

Você está no lugar certo!

Neste artigo vou disponibilizar os arquivos necessários para começar a usar, sem precisar entender muito bem, o misterioso XOXO. Continue lendo…