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

12 de maio, 2008 por Ricardo José Corrêa
1 Star2 Stars3 Stars4 Stars5 Stars ( Não há classificações ainda)
Loading ... Loading ...

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

Technorati Tags: , , ,

Compartilhe e aproveite:
  • del.icio.us
  • Technorati
  • Digg
  • Facebook
  • Google
  • Reddit
  • Furl
  • Mixx
  • Live
  • E-mail this story to a friend!

Deixe um comentário


I love beerI love CMSI love DesignI love DreamweaverI love FlashI love FoodI love GamesI love MoneyI love MusicI love PhotoshopI love PHPI love ProgrammingI love ShoppingI love WindowsI love Wine
Site protegido Feito com a cabeça PageRank Add to Technorati Favorites