Los marcos de JavaScript jQuery le permite presentar a los visitantes de su sitio web con contenido que se organiza en una ventana de menú con pestañas eficiente. Cuando el usuario hace clic en una pestaña, el contenido correspondiente aparece inmediatamente en la pantalla. Usted puede optar por colocar este contenido en el interior de un cuadro de diálogo de modelo. Un modelo de diálogo marcos de caja de las pestañas y el contenido con pestañas dentro de una ventana pop-up. La funcionalidad tanto para el diálogo de modelo y el contenido con pestañas son una parte de la interfaz de usuario jQuery plug-in.
CREAR JQUERY
Insertar jQuery y el plugin jQuery UI en su sitio. Ambas bibliotecas están disponibles en la API del desarrollador de Google. El siguiente ejemplo de código muestra el método para integrar las dos bibliotecas:
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" / script
script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" / script
Enlace a la hoja de estilos en cascada que contiene el tema de la interfaz de usuario jQuery a tu elección. Este ejemplo muestra cómo incrustar cupertino tema de la interfaz de usuario jQuery.
enlace href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel tipo "stylesheet" = = "text / css" /
Crear una lista de HTML e iniciar un elemento de la lista para cada ficha que desea que aparezca en el menú de la ficha. Ate una barra de navegación interior a cada elemento de la lista. En este ejemplo, la lista cuenta con tres pestañas y reside dentro de un div que tiene el ID de pestañas.
div id = "fichas"
ul
lia href = "# tabs-1" Tab Uno / a / li
lia href = "# pestañas-2" Tab Two / a / li
lia href = "# tabs-3" Tab Tres / a / li
/ Ul
/ Div
Crear un div para cada ficha. Título del div para coordinar con el texto del vínculo de anclaje de los elementos de la lista. Coloque cada div dentro del div pestañas.
div id = "tabs-1" Este es el texto dentro de la primera pestaña / div
div id = "pestañas-2" Este es el texto dentro de la segunda pestaña / div
div id = "tabs-3" Este es el texto dentro de la etiqueta / div tercero
Envuelva el div pestañas dentro de un div diálogo modelo. Es necesario ajustar el menú en un div diálogo de modelo de forma que aparecerá el menú de pestañas dentro de la ventana emergente. Aquí es un ejemplo de un cuadro de diálogo titulado div.
div id = "diálogo" title = "Elige una pestaña"
Escriba el código de jQuery. El código jQuery se abre automáticamente el diálogo y establece las funciones de menú con pestañas. Consideremos el siguiente ejemplo. La primera función jQuery concede las pestañas jQuery UI () para la Identificación pestañas. La segunda función jQuery atribuye la función de diálogo () a la div de diálogo y establece el ancho de la ventana de diálogo para 840 píxeles.
$ (Function () {
$ ("# Tabs") tabs ().;
});
$ (Function () {
$ ("# De diálogo") diálogo ({width: 840}).;
});
Consejos y advertencias
Aquí está el código de ejemplo en su totalidad:
enlace href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel tipo "stylesheet" = = "text / css" /
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" / script
script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" / script
guión
$ (Function () {
$ ("# Tabs") tabs ().;
});
$ (Function () {
$ ("# De diálogo") diálogo ({width: 840}).;
});
/ Script
div id = "diálogo" title = "Elige una pestaña"
div id = "fichas"
ul
lia href = "# tabs-1" Tab Uno / a / li
lia href = "# pestañas-2" Tab Two / a / li
lia href = "# tabs-3" Tab Tres / a / li
/ Ul
div id = "tabs-1" Este es el texto dentro de la primera pestaña / div
div id = "pestañas-2" Este es el texto dentro de la segunda pestaña / div
div id = "tabs-3" Este es el texto dentro de la etiqueta / div tercero
/ Div
/ Div
No hay comentarios:
Publicar un comentario