Wextensible

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:
Opera 10.6 no actualiza adecuadamente el borde de las pestañas. Aún no he descubierto la raíz del problema, pues Internet Explorer 8, Firefox 3.6 y Safari 4.0 si lo hacen.

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 "".

Estos son dos ejemplos más:

Ejemplo:

Otro ejemplo

Este 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:

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.