Tablas Especiales
Quisiera crear en mi Website una tabla como la que hay en la siguiente web:
- www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"...
El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras páginas.
- En segundo lugar y en la misma web economist.com, quiero crear una caja como la principal que contiene las imágenes y el texto.
- www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"...
El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras páginas.
- En segundo lugar y en la misma web economist.com, quiero crear una caja como la principal que contiene las imágenes y el texto.
2 respuestas
Respuesta de zagalet
1
Eso se consigue con CSS + Javascript,
Hay el contenido de cada pestaña en una capa diferente y el botón lo que hace es mostrar y ocultar las capas.
Yo me hice una función muy simple que puedes ver como queda en esta página http://www.ornis.ws/formulario/buscador.php
Te pego los códigos para que los pruebes (Utiliza la librería jquery, si no la tienes bájatela de jquery.com http://docs.jquery.com/Downloading_jQuery
Copias el archivo jquery-x. X.x junto con tus archivos js (o donde prefieras)
archivo tabs.js:
function changeTab(el)
{
var contentTabs=$(el).parents(".contentTabs");
$(el).blur(); //quita foco de enlace
$(el).parents("ul").children("li").removeClass("actTab");//desactiva tabs
$(el.parentNode).addClass("actTab");
var ee=$("#"+$(el.parentNode).attr("id").replace('tab_',''));
ee.parents("div").children(".itemZoneTab").hide(); //oculta todos los contenidos de los tabs
ee.show();//muestra el contenido del tab seleccionado
}
function closeAllTabs(el)
{
var ee=$(el).parents(".itemZoneTab");
$("#tab_"+ee.attr("id")).removeClass("actTab");
ee.hide()
}
archivo tabs.css:
/* Tabs */
.tabs {background: #fff; float:left; width:100%; display:inline; border-bottom:#ccc 1px solid;}
.tabs ul li{ list-style:none; width:50px;float:left; border:1px solid #ccc; border-bottom:0px; padding:6px 15px; font:11px/11px Arial,Helvetica,sans-serif; margin:1px -1px 0 0; background:#FFFFFF;}
.tabs ul li a, .tabs ul li span{display:block; height:15px; text-decoration:none; }
.tabs ul li span{color:#666666;}
.tabs ul li.actTab {border:1px solid #bcbcbc; border-bottom:0; padding:7px 15px; margin:0 0 -1px 0;background:#F7F9FA; color:#666666;}
.tabs ul li.actTab a{ text-decoration:none; color:#666666;}
/* zona que se muestra */
.zoneTab {padding:10px; border:1px solid #ccc; border-top:0px; margin:0px; background-color:#F7F9FA; }
.itemZoneTab{margin-top:30px; display:block; overflow:hidden;}
archivo index.html:
<html>
<head>
<script type="text/javascript" language="JavaScript" src="jquery-x.x.x.js"></script>
<script type="text/javascript" language="JavaScript" src="tabs.js"></script>
<link href="tabs.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="contentTabs">
<div class="tabs">
<ul>
<li id="tab_poliMapa" class="actTab"><a href="javascript:void(null);" onclick="changeTab(this);">Tab 1</a></li>
<li id="tab_poliDatos"><a href="javascript:void(null);" onclick="changeTab(this);">Tab 2</a></li>
</ul>
</div>
<div class="zoneTab">
<div id="poliMapa" class="itemZoneTab">
<p>Contenido del Tab 1</p>
<a style="padding-top:10px; float:right;" href="javascript:void(null);" onClick="closeAllTabs(this);">Cerrar</a>
</div>
<div id="poliDatos" style="display:none;" class="itemZoneTab">
<p>Contenido del Tab 2</p>
<a style="padding-top:10px; float:right;" href="javascript:void(null);" onClick="closeAllTabs(this);">Cerrar</a>
</div>
</div>
</div>
</body>
</html>
///////////////////
Si copias todos los archivos en la misma carpeta ya tiene que funcionar (acuérdate de modificar el nombre del archivo del jquery según la versión que descargues.
Modifica el CSS para ajustarlo a tu sitio
Que lo disfrutes
Hay el contenido de cada pestaña en una capa diferente y el botón lo que hace es mostrar y ocultar las capas.
Yo me hice una función muy simple que puedes ver como queda en esta página http://www.ornis.ws/formulario/buscador.php
Te pego los códigos para que los pruebes (Utiliza la librería jquery, si no la tienes bájatela de jquery.com http://docs.jquery.com/Downloading_jQuery
Copias el archivo jquery-x. X.x junto con tus archivos js (o donde prefieras)
archivo tabs.js:
function changeTab(el)
{
var contentTabs=$(el).parents(".contentTabs");
$(el).blur(); //quita foco de enlace
$(el).parents("ul").children("li").removeClass("actTab");//desactiva tabs
$(el.parentNode).addClass("actTab");
var ee=$("#"+$(el.parentNode).attr("id").replace('tab_',''));
ee.parents("div").children(".itemZoneTab").hide(); //oculta todos los contenidos de los tabs
ee.show();//muestra el contenido del tab seleccionado
}
function closeAllTabs(el)
{
var ee=$(el).parents(".itemZoneTab");
$("#tab_"+ee.attr("id")).removeClass("actTab");
ee.hide()
}
archivo tabs.css:
/* Tabs */
.tabs {background: #fff; float:left; width:100%; display:inline; border-bottom:#ccc 1px solid;}
.tabs ul li{ list-style:none; width:50px;float:left; border:1px solid #ccc; border-bottom:0px; padding:6px 15px; font:11px/11px Arial,Helvetica,sans-serif; margin:1px -1px 0 0; background:#FFFFFF;}
.tabs ul li a, .tabs ul li span{display:block; height:15px; text-decoration:none; }
.tabs ul li span{color:#666666;}
.tabs ul li.actTab {border:1px solid #bcbcbc; border-bottom:0; padding:7px 15px; margin:0 0 -1px 0;background:#F7F9FA; color:#666666;}
.tabs ul li.actTab a{ text-decoration:none; color:#666666;}
/* zona que se muestra */
.zoneTab {padding:10px; border:1px solid #ccc; border-top:0px; margin:0px; background-color:#F7F9FA; }
.itemZoneTab{margin-top:30px; display:block; overflow:hidden;}
archivo index.html:
<html>
<head>
<script type="text/javascript" language="JavaScript" src="jquery-x.x.x.js"></script>
<script type="text/javascript" language="JavaScript" src="tabs.js"></script>
<link href="tabs.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="contentTabs">
<div class="tabs">
<ul>
<li id="tab_poliMapa" class="actTab"><a href="javascript:void(null);" onclick="changeTab(this);">Tab 1</a></li>
<li id="tab_poliDatos"><a href="javascript:void(null);" onclick="changeTab(this);">Tab 2</a></li>
</ul>
</div>
<div class="zoneTab">
<div id="poliMapa" class="itemZoneTab">
<p>Contenido del Tab 1</p>
<a style="padding-top:10px; float:right;" href="javascript:void(null);" onClick="closeAllTabs(this);">Cerrar</a>
</div>
<div id="poliDatos" style="display:none;" class="itemZoneTab">
<p>Contenido del Tab 2</p>
<a style="padding-top:10px; float:right;" href="javascript:void(null);" onClick="closeAllTabs(this);">Cerrar</a>
</div>
</div>
</div>
</body>
</html>
///////////////////
Si copias todos los archivos en la misma carpeta ya tiene que funcionar (acuérdate de modificar el nombre del archivo del jquery según la versión que descargues.
Modifica el CSS para ajustarlo a tu sitio
Que lo disfrutes
Respuesta de cblaarc
Precisamente esta no se como estará hecha pero se puede hacer con una combianción de imágenes y java script.
Por ejemplo, creas la tabla con las imágens (normal). La primera con el color que tendrá cuando esté marcada y las otras con su color correspondiente.
Luego utilizas javascript, los eventos onmouseover(), onclic(), etc. de forma que cuando estás con el ratón encima llama a una imagen con un color determinado y sustituye la inical por esta, y cuando haces click también sustituye la inicial por otra imagen con el color cambiado. Yo suelo utilizar el dreamweaver que tiene ya una forma fácil de añadir estos eventos de javascript.
Por ejemplo, creas la tabla con las imágens (normal). La primera con el color que tendrá cuando esté marcada y las otras con su color correspondiente.
Luego utilizas javascript, los eventos onmouseover(), onclic(), etc. de forma que cuando estás con el ratón encima llama a una imagen con un color determinado y sustituye la inical por esta, y cuando haces click también sustituye la inicial por otra imagen con el color cambiado. Yo suelo utilizar el dreamweaver que tiene ya una forma fácil de añadir estos eventos de javascript.