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

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 de width="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 propiedad width.
• alto: De forma similar para dotar el estilo CSS al alto de la tabla. Inicialmente se le da width=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:

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 argumento antesDespues 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.