Pestañas para el interior de un formulario emergente
Ampliar el contenido de un formulario emergente con pestañas
A veces es deseable que los formularios emergentes ocupen poco espacio y a la vez muestren el mayor contenido posible. Además también hace falta agrupar esos contenidos por materias. Este es el objeto de las pestañas. En este primer ejemplo creamos una instancia emerge1
así:
// Declaramos la variable para la instancia de un emergente var emerge1 = null; ... // Construimos los emergentes con la carga de la página window.onload = function() { // Constuctor emerge1 = new formEmerge("emerge1", "Emerge1", true, 1); // Llenamos un array con los títulos de las pestañas var arrayPestanyas = new Array( "Pestaña 1", "Pestaña 2", "Pestaña 3", "Pestaña 4", "Pestaña 5"); // Llenamos una array con los contenidos var arrayHtmls = new Array( "Contenido para <b>PRIMERA PESTAÑA de Emerge1</b>", "Contenido para <b>SEGUNDA PESTAÑA de Emerge1</b>", "Contenido para <b>TERCERA PESTAÑA de Emerge1</b>", "Contenido para <b>CUARTA PESTAÑA de Emerge1</b>", "Contenido para <b>QUINTA PESTAÑA de Emerge1</b>"); // Creamos las pestañas con esos dos array emerge1.creaTabs(arrayPestanyas, arrayHtmls); ... }
El constructor new formEmerge()
es preferible colocarlo en el window.onload
como hemos dicho en temas anteriores. Observamos que llenamos dos arrays, uno con los nombres de las pestañas y otro con los contenidos. El primero debería ser texto sin HTML, aunque nada impediría incluirlo. El segundo puede ser HTML. Finalmente llamamos al método emerge1.creaTabs(arrayPestanyas, arrayHtmls)
que es quién realmente crea esa estructura. El resultado se obtiene a partir de este botón
Ejemplo:
Ejemplo para abrir un emergente con 5 pestañas:Nota de arreglo de este problema: En Julio 2011 por fin he encontrado la raíz del problema y ya Opera actualiza estos bordes. Ver cómo se hacen los contenedores con pestañas para más información.
cuyo código es el siguiente y que ya hemos explicado en temas anteriores:
input type="button" value="emerge1" onclick = "emerge1.abrir('','', this.offsetLeft, this.offsetTop + this.offsetHeight)" />
Es claro que podemos incluir muchísimo más contenido en la misma área de pantalla, por lo que es un recurso muy interesante. El método que crea las pestañas es el siguiente:
creaTabs(arrayNombres, arrayHtmls[, ancho[, alto[, antesDespues]]])
Como en casos anteriores, los argumentos entre corchetes son opcionales. Si se omite alguno antes de otro, ese omitido debe pasarse como una cadena vacía "".
arrayNombres
: Un array con cadenas de texto para los nombres de las pestañas. Admite un literal HTML, como veremos en los próximos ejemplos.arrayHtmls
: Un array con el mismo número de cadenas de texto para los literales HTML de los correspondientes contenidos.ancho
: Un cadena para especificar el estilo CSS del ancho de la tabla que representa toda la estructura interior de pestañas. Inicialmente se dota dewidth="30em"
. Si no se especifica argumento, el ancho final viene condicionado por las pestañas, pues si sus títulos ocupan más de esos 30em, la tabla se alargará. Si el ancho es mayor que la suma de las pestañas, la tabla las redimensionará para adecuarlas al especificado en su propiedadwidth.
alto
: De forma similar para dotar el estilo CSS al alto de la tabla. Inicialmente se le dawidth=5em
. Si el contenido interior es más grande se abre la barra de desplazamiento vertical.antesDespues
: Un string con los valores "antes" o "despues" para anexar la estructura de pestañas antes o después del contenido interior que pueda existir ya en el emergente. Si no se pasa el argumento se anexa antes.
Estos son dos ejemplos más:
Ejemplo:
Otro ejemploEste ejemplo muestra que podemos poner HTML en los títulos así como saltos de línea:
En el último ejemplo anterior encontrará que hemos incluido HTML en la pestaña del medio. En la última hemos puesto un salto de línea con <br />
, lo que redimensiona todas las pestañas a doble línea. También se observa contenido adicional antes y después de la tabla. Además del método creaTabs()
para incorporar una estructura de pestañas en el interior del formulario emergente, tenemos también dos métodos adicionales:
nuevoInterior(html)
: Este método ya lo hemos usado en temas anteriores. Incorpora un literal HTML en el cuerpo interior del emergente sustituyendo todo lo que haya.anexaInterior(html, antesDespues)
: En cambio ahora podemos anexar contenido HTML adicional, bien antes o después del contenido interior actual pasando el argumentoantesDespues
igual a "antes" o "despues". Esto es lo que hicimos en el último ejemplo.
Lo explicado más los comentarios dentro del siguiente código de creación de los emergentes de estos ejemplos será suficiente para observar todos los detalles.
var emerge2 = null; var emerge3 = null; window.onload = function() { ... // UN EJEMPLO ============================== emerge2 = new formEmerge("emerge2", "Emerge2", false, 1); // Títulos de pestañas arrayPestanyas = new Array( "Pestaña en primer lugar", "Pestaña 2", "Esta es una mucho más grande"); // Este es un contenido con HTML var contenido1 = "<div style='font-family: monospace; text-align: justify;'>" + "<img src='../../images/logo.gif' alt='wextensible' " + "style='float: left; margin: 0.1em;' />" + "Esto es un ejemplo ..."; // Llenamos un array con los contenidos... arrayHtmls = new Array( contenido1, contenido2, "Contenido <b>3</b>"); // ... y creamos las pestañas emerge2.creaTabs(arrayPestanyas, arrayHtmls); // OTRO EJEMPLO ============================== // En este ejemplo metemos HTML también en los // títulos de las pestañas emerge3 = new formEmerge("emerge3", "Emerge3", false, 1); arrayPestanyas = new Array( "Pestaña en primer lugar", "<img src='../../images/logo.gif' width='14' height='14' /> <i>Pestaña HTML</i>", "Esta tiene un salto<br />de línea"); contenido2 += "<br />La tabla se compone de una primera fila con las " + "pestañas, con tantas celdas ..."; arrayHtmls = new Array( contenido1, contenido2, "Contenido <b>3</b>"); // Aquí hemos dado ancho y alto a la tabla interior emerge3.creaTabs(arrayPestanyas, arrayHtmls, "40em", "5em"); //Podemos meter más cosas antes de la estructura de pestañas var otroContenido = "Otro contenido <b>anexado</b> <big>ANTES</big> de las pestañas."; emerge3.anexaInterior(otroContenido, "antes"); //y también después otroContenido = "Otro contenido <b>anexado</b> <big>DESPUÉS</big> de las pestañas."; emerge3.anexaInterior(otroContenido, "después"); }
Todo este código se encuentra en la cabecera de este documento, por lo que con el menú del navegador puede acceder al mismo de forma completa.