JavaScript Tabifier
Segunda-feira, 18-06-2007 # 15:54 Javascript, Tutoriais 377 palavras

Aprenda a colocar as abas que tanto podem ser usadas no seu perfil como nas suas páginas extras.
Página do script barelyfitz.com

01. Faça o download do arquivo tabber e descompacte.
02. Envie o arquivo tabber.js para o seu servidor.
03. Coloque depois da tag head o seguinte código:

<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}< \/style>');
</style></script>
<script type="text/javascript" src="http://www.SEUSITE.com/tabber.js"></script>

Não esqueça de substituir "SEUSITE" pelo seu endereço correto.

04. Adicione ao seu css o conteúdo do arquivo "example.css" ou faça o upload dele para o seu servidor e chame para o seu template usando:

<link rel="stylesheet" href="http://www.SEUSITE.com/example.css" type="text/css" media="screen" />

Edite no css as cores e os estilo que você achar melhor.

05. Onde você quer que apareçam as abas use:

<div class="tabber">
<div class="tabbertab"><h3>Aba 1</h3>Conteúdo 1 aqui</div>
<div class="tabbertab" title="Aba 2">Conteúdo 2 aqui</div>
<div class="tabbertab" title="Aba 3">Conteúdo 3 aqui</div>
</div>

06. Abaixo do código das abas coloque:

<script type="text/javascript"> /* Since we specified manualStartup=true, tabber will not run after the onload event. Instead let's run it now, to prevent any delay while images load. */ tabberAutomatic(tabberOptions); </script>

07. (Opcional) Se você quiser que o que o conteúdo das abas carregue mesmo se não estiver concluído, coloque depois de head o seguinte:

<script type="text/javascript">
var tabberOptions = {manualStartup:true};
</script>
<script type="text/javascript" src="tabber.js">
</script>

Obrigada http://skywards.iblogger.org por essa sugestão.

08. O resultado será semelhante a esse:



« Últimos Posts
Tá Soda! »

38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1


Nenhum comentário em “JavaScript Tabifier” -