Tabs permiten a los visitantes ver diferentes piezas de contenido sin necesidad de recargar la página.
Descargue la plancha de caldera de HTML5 (ver el enlace en la sección de Recursos), que servirá como base para la plantilla y ahorrar una gran cantidad de trabajo. Descomprimir el archivo en la ubicación elegida, y abrir el archivo "index.html" en el código HTML preferida o el editor de texto. Coloca el cursor en la línea en blanco después de "div id =" "role =" main main "" y presiona "Enter" una vez.
Cree una lista desordenada con la etiqueta "ul" para mantener el nombre de cada ficha, y darle una clase de "pestañas". Esta clase define cómo aparecerá cada ficha y ayuda a construir la estructura de la barra de navegación.
ul class = "tabs"
liHome / li
liPortfolio / li
Libio / li
liContact / li
/ Ul
Vincular el nombre de cada pestaña en la lista con el tag "a", y utilizar el nombre de la ficha para el valor "href", precedido por el signo de número (#). El signo "#" actúa como un ancla, que jQuery utilizará para mostrar el contenido de cada pestaña cuando un usuario hace clic en la pestaña. Por ejemplo:
ul class = "tabs"
lia href = "# home" Home / a / li
lia href = "# cartera" Portfolio / a / li
lia href = "# bio" Bio / a / li
lia href = "# contact" Contacto / a / li
/ Ul
Introduzca un DIV con una clase de "tab_wrapper" debajo de la lista. Este contenedor celebrará la página de contenido de cada ficha.
div class = "tab_wrapper"
/ Div
Añadir DIVs para cada página de contenido dentro de la envoltura pestaña, dando a cada uno la clase de "contenido". Esta clase definirá disposición general del contenido de la página, como relleno, márgenes y cualesquiera estilos especiales sólo desea aplicar a las páginas de ficha. Utilice el valor "href" de cada enlace de la ficha en la lista como el DIV valor "id":
div class = "tab_wrapper"
div id = class "casa" = "contenido"
- Contenido -
/ Div
div id = clase "cartera" = "contenido"
- Contenido -
/ Div
div id = class "bio" = "contenido"
- Contenido -
/ Div
div id = class "contacto" = "contenido"
- Contenido -
/ Div
/ Div
Reemplazar "- Traducción del original -" con el marcado de cada pestaña. Como se trata de una plantilla, sólo insertar un esquema básico en lugar de contenido específico. Si va a crear una plantilla para una plataforma de blogs como WordPress o Tumblr, este sería un lugar apropiado para su contenido etiquetas de plantilla. Un ejemplo de cómo se puede crear una sección de contenido sería:
div id = class "casa" = "contenido"
h2Title/h2
artículo
sección
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy NIBH euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
/ Sección
/ Article
/ Div
Abra el documento "style.css" ubicado en la carpeta "css" de la plantilla. Desplácese hacia abajo a la sección "Estilos primarios", y añadir una definición de estilo para su clase "pestañas". Los parámetros principales que son necesarios para definir un estilo de lista, altura y anchura. Una lista de estilo de "none" permite que sus pestañas se alineen horizontalmente en la parte superior de la pestaña de contenido:
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
altura: 32px;
border-bottom: 1px solid # 999;
border-left: 1px solid # 999;
width: 100%;
}
Añadir un estilo debajo de esta definición para los enlaces de fichas. Para crear la apariencia de "pestañas", debe utilizar un tipo de pantalla de "bloqueo" y dar a cada enlace un poco de relleno. Otros parámetros que se pueden añadir incluyen color, estilos de fuente y una frontera. También crear estilos para el "flotar" y el estado "activo" de cada enlace para añadir variación de color o comportamiento.
ul.tabs li a {
display: block;
padding: 0 20px;
}
Crear estilos para su clase "contenido" "tab_container" y. Definir un exceso de "oculto", y darle a su contenedor de la misma anchura que las pestañas. También agregue un "claro: tanto" parámetro para mantener el contenido de saltar al lado de la pestaña de navegación:
. Tab_container {
overflow: hidden;
claro: ambos;
width: 100%;
}
Abra el documento "script.js", ubicado en la carpeta "js" de la plantilla. Agregue el siguiente código justo debajo de la "* /" línea:
$ (Document). Ready (function () {
. $ (". Tab_content") hide (); / / Ocultar todo el contenido
$ ("Ul.tabs li: primero").. AddClass ("activo") show (); / / Activar primera pestaña
. $ (". Tab_content: primero") muestran (); / / Mostrar contenidos primera pestaña
/ / El evento Click
$ ("Ul.tabs li"). Haga clic en (function () {
$ ("Ul.tabs li") removeClass ("activo"). / / Eliminar cualquier clase de "activo"
$ (This) addClass ("activo"). / / Agregar clase "activa" a la pestaña seleccionada
. $ (". Tab_content") hide (); / / Ocultar todo el contenido de la ficha
. activeTab var = $ (this) find ("a") attr ("href"). / / Buscar el valor del atributo href para identificar la pestaña activa + contenidos
$ (ActiveTab) fadeIn (). / / Fundido en el contenido de ID activo
return false;
});
});
Guarde todos los tres archivos. Ahora tiene una plantilla tabbable que puede utilizar para crear cualquier número de diseños de página web y temas.
No hay comentarios:
Publicar un comentario