Código de CSS - Pestañas autoajustables con estilos y JavaScript

Imágen de perfil

Pestañas autoajustables con estilos y JavaScriptgráfica de visualizaciones


CSS

Publicado el 26 de Febrero del 2008 por Xavi
8.840 visualizaciones desde el 26 de Febrero del 2008. Una media de 21 por semana
Código que muestra como utilizar pestañas auto ajustables en anchura sin utilizar ninguna imagen, únicamente con estilos y un poco de javaScript.
Probado con IE 6, 7, Konqueror 3.5, Firefox 2.0 y Safari 3.0.

Versión 1

Publicado el 26 de Febrero del 2008gráfica de visualizaciones de la versión: Versión 1
8.841 visualizaciones desde el 26 de Febrero del 2008. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title></title>
 
<style type="text/css">
.g {float:left;padding:0px;}
.separator {display:block;width:4px;height:27px;border-bottom:1px solid;}
 
/*estilos para las opciones no seleccionadas*/
.tabu {}
.textu {display:block;float:left;border-right:1px solid #606060; border-left:1px solid #606060;padding:0 5px 2px 5px;background:#9d9d9d;text-align:center;height:20px;color:#fff;}
.a1u {margin:0 5px; border-bottom:1px solid #000;}
.a2u {margin:0 3px; border-right:2px solid #000; border-left:2px solid #000; border-bottom:1px solid #9d9d9d;}
.a3u {margin:0 2px; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #9d9d9d;}
.a4u {margin:0 1px; border-left:1px solid #000; border-right:1px solid #000; border-bottom:2px solid #9d9d9d;}
.b1u {margin-top:22px;border-bottom:1px solid;}
 
/*estilos para las opciones seleccionadas*/
.texts {display:block;float:left;border-right:1px solid #606060; border-left:1px solid #606060;padding:0 5px 2px 5px;background:#fff;text-align:center;height:20px;}
.a1s {margin:0 5px; border-bottom:1px solid #606060;}
.a2s {margin:0 3px; border-right:2px solid #606060; border-left:2px solid #606060; border-bottom:1px solid #fff;}
.a3s {margin:0 2px; border-left:1px solid #606060; border-right:1px solid #606060; border-bottom:1px solid #fff;}
.a4s {margin:0 1px; border-left:1px solid #606060; border-right:1px solid #606060; border-bottom:2px solid #fff;}
.b1s {margin-top:22px;border-bottom:1px solid #fff;}
 
/*estilos para seleccionar al pasar por encima en las opciones no seleccionadas*/
.tabu_o {cursor:pointer;}
.textu_o {display:block;float:left;border-right:1px solid #bcbcbc; border-left:1px solid #bcbcbc;padding:0 5px 2px 5px;background:#ddd;text-align:center;height:20px;}
.a1u_o {margin:0 5px; border-bottom:1px solid #bcbcbc;}
.a2u_o {margin:0 3px; border-right:2px solid #bcbcbc; border-left:2px solid #bcbcbc; border-bottom:1px solid #ddd;}
.a3u_o {margin:0 2px; border-left:1px solid #bcbcbc; border-right:1px solid #bcbcbc; border-bottom:1px solid #ddd;}
.a4u_o {margin:0 1px; border-left:1px solid #bcbcbc; border-right:1px solid #bcbcbc; border-bottom:2px solid #ddd;}
</style>
 
<script type="text/javascript">
<!--
//Funcion que se ejecuta cuando pasa el raton por encima de una pestaña no activa
function pestana_select(id)
{
	//Devuelve la cantidad de hijos del id=a
	//window.alert(document.getElementById("a").childNodes.length);

	//Devuelve la cantidad de elementos dentro del id=a del tipo 'b' (otro ejemplo seria del tipo 'div')
	//window.alert(document.getElementById("a").getElementsByTagName('b').length);

	//Devuelve el nombre del tercer tag del tipo 'b' dentro del id=a
	//window.alert(document.getElementById("a").getElementsByTagName('b')[2].className);

	//Permite cambiar una propiedad en concreto
	//elemento.getElementsByTagName('a')[0].style.color='#000';

	//window.alert(window.alert(document.getElementById("a").getElementsByTagName('div')[0].className))

	elemento=document.getElementById(id);
	elemento.getElementsByTagName('div')[0].setAttribute((document.all?'className':'class'),'tabu_o');
	elemento.getElementsByTagName('div')[1].setAttribute((document.all?'className':'class'),'a1u_o');
	elemento.getElementsByTagName('div')[2].setAttribute((document.all?'className':'class'),'a2u_o');
	elemento.getElementsByTagName('div')[3].setAttribute((document.all?'className':'class'),'a3u_o');
	elemento.getElementsByTagName('div')[4].setAttribute((document.all?'className':'class'),'a4u_o');
	elemento.getElementsByTagName('div')[5].setAttribute((document.all?'className':'class'),'textu_o');
}

//Funcion que se ejecuta cuando el raton deja de pasar por encima de una pestaña no activa
function pestana_unselect(id)
{
	elemento=document.getElementById(id);
	elemento.getElementsByTagName('div')[0].setAttribute((document.all?'className':'class'),'tabu');
	elemento.getElementsByTagName('div')[1].setAttribute((document.all?'className':'class'),'a1u');
	elemento.getElementsByTagName('div')[2].setAttribute((document.all?'className':'class'),'a2u');
	elemento.getElementsByTagName('div')[3].setAttribute((document.all?'className':'class'),'a3u');
	elemento.getElementsByTagName('div')[4].setAttribute((document.all?'className':'class'),'a4u');
	elemento.getElementsByTagName('div')[5].setAttribute((document.all?'className':'class'),'textu');
}
-->
</script>
</head>
 
<body>
<div>
	<div class="g separator"></div>
	<div class="g" id='a' onmouseover="javascript:pestana_select('a');" onmouseout="javascript:pestana_unselect('a');" onclick="javascript:window.location='#1'">
		<div class="tabu">
			<div class="a1u"></div><div class="a2u"></div><div class="a3u"></div><div class="a4u"></div>
			<div class="textu">no seleccionado</div>
			<div class="b1u"></div>
		</div>
	</div>
	<div class="g separator"></div>
	<div class="g" id='b' onmouseover="javascript:pestana_select('b');" onmouseout="javascript:pestana_unselect('b');" onclick="javascript:window.location='#2'">
		<div class="tabu">
			<div class="a1u"></div><div class="a2u"></div><div class="a3u"></div><div class="a4u"></div>
			<div class="textu" style=''>opcion</div>
			<div class="b1u"></div>
		</div>
	</div>
	<div class="g separator"></div>
	<div class="g" id='c'>
		<div class="tabu">
			<div class="a1s"></div><div class="a2s"></div><div class="a3s"></div><div class="a4s"></div>
			<div class="texts">seleccionado</div>
			<div class="b1s"></div>
		</div>
	</div>
	<div class="g separator"></div>
	<div class="g" id='d' onmouseover="javascript:pestana_select('d');" onmouseout="javascript:pestana_unselect('d');" onclick="javascript:window.location='#4'">
		<div class="tabu">
			<div class="a1u"></div><div class="a2u"></div><div class="a3u"></div><div class="a4u"></div>
			<div class="textu">otro no seleccionado</div>
			<div class="b1u"></div>
		</div>
	</div>
	<div style="display:block;height:27px;border-bottom:1px solid;"></div>
</div>
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s1637