Código fuente de los ejemplos de aplicación de la clase formEmerge
Estos es el código fuente del script y estilo situado en el encabezado del documento Ejemplos de aplicación de formEmerge.
Actualización Julio 2012: He incorporado un resaltador de código que mostrará el código actual de un documento HTML, JS, CSS o PHP. Lo que se expone aquí puede haber sido modificado. Vea el actual código de este página con el botón de la cabecera o bien en este enlace aplicaciones-ejemplos.html
Código JavaScript
//Una instancia de un calendario para usar en el ejemplo var miCalendario = null; //Una instancia de un emergente para el ejemplo var emergeCalendario = null; //Una instancia para el formulario de envío de datos var miForm = null; //Instancias para el ejemplo de la calculadora var unaCalculadora = null; var miCalc = null; var emergeCalculadora = null; //Una instancia para un bloc de notas y otro para opciones var emergeNotas = null; var emergeOpciones = null; var emergeContextual = null; var emergeMensaje = null; //Carga de la página, donde creamos formularios emergentes window.onload = function() { // EJEMPLO DEL CALENDARIO -------------------------------- //Creamos el primer emergente para el calendario emergeCalendario = new formEmerge("emergeCalendario", "Calendario", true, 2, "marco"); //Componemos un interior para ubicar el calendario var html = "<div class='previo-cal'>" + "<input type='button' value='<' " + "onclick = 'miCalendario.mueveCalendar(-1)' />" + "<input type='text' id='ubica-titulo' value='' size='8' " + "onfocus = 'miCalendario.entraFecha(this)' " + "onblur = 'miCalendario.mueveMesAnyo(this)' />" + "<input type='button' value='>' " + "onclick = 'miCalendario.mueveCalendar(1)' />" + "</div>" + "<div id='ubica-calendario'></div>"; //Ponemos esa composición en el interior del emergente emergeCalendario.nuevoInterior(html); //Establecemos el cuadro de fecha como objeto respuesta. emergeCalendario.idObjetoRespuesta = "cuadro-fecha"; //Cuando se abra el calendario, situamos la fecha del cuadro emergeCalendario.eventoAbrir = true; emergeCalendario.ejecutaEventoAbrir = function (){ //Construimos la hoja del calendario según la fecha del objeto //respuesta. Si no es válida o está en blanco ponemos la fecha //actual. compruebaFecha() y fechaActual() son dos funciones //globales de calendar.js var fecha = ""; var arrFecha = compruebaFecha(emergeCalendario.respuesta); if (arrFecha == null) { fecha = fechaActual()[4]; emergeCalendario.respuesta = fecha; } else { fecha = arrFecha[3] } miCalendario.situaFecha(fecha); } //Cuando pulsemos aceptar extraemos la fecha del calendario emergeCalendario.eventoAceptar = true; emergeCalendario.ejecutaEventoAceptar = function(){ emergeCalendario.respuesta = miCalendario.devuelveFecha("fecha-larga"); } //Creamos un objeto calendario, pero no construimos inicialmente //ninguna hoja de calendario, pues esto se hará con el evento abrir //del emergente que llama al método situaFecha() del calendario que //creará la hoja de ese mes y fecha. var hoy = fechaActual(); var fechaHoy = hoy[1]+"/"+hoy[2]+"/"+hoy[3]; miCalendario = new calendar("miCalendario", "ubica-calendario", "ubica-titulo", fechaHoy, true); // EJEMPLO DEL FORMULARIO PARA ENVIO DE DATOS --------------------- //Creamos otro emergente para envío de datos miForm = new formEmerge("miForm", "Enviar datos", true, 3, "marco", "miform.php", "post"); //Componemos un literal HTML para los campos de la primera pestaña var html1 = "<label>Nombre:<input type='text' name='nombre' value='' " + "size='35' class='fuente-mi-form' />" + "</label><br />" + "<label>Dirección:<input type='text' name='direccion' value='' " + "size='35' class='fuente-mi-form' />" + "</label><br />" + "<label>E-mail:<input type='text' name='email' value='' " + "size='35' class='fuente-mi-form' />" + "</label><br />" + "<label>Cuestión:<br /><textarea name='cuestion' rows='7' cols='40' "+ "class='fuente-mi-form'></textarea>" + "</label>"; //Componemos otro literal para la segunda pestaña var html2 = "<label>Edad:<input type='text' name='edad' value='' " + "size='10' class='fuente-mi-form' />" + "</label><br />" + "<label>Profesión:<input type='text' name='profesion' value='' " + "size='35' class='fuente-mi-form' />" + "</label><br />" + "<label>Aficiones:<input type='text' name='aficiones' value='' " + "size='35' class='fuente-mi-form' />" + "</label><br />"; //Llenamos un array con los nombres de las pestañas var arrayPestanyas = new Array("Personales", "Otros datos"); //Llenamos otro array con los contenidos literales HTML var arrayHtmls = new Array(html1, html2); //Creamos las pestañas con esos dos array y les damos //ancho, alto y "auto" para la propiedad overflow miForm.creaTabs(arrayPestanyas, arrayHtmls, "23em", "14em", "auto"); //EJEMPLO DEL FORMULARIO EMERGENTE CON CALCULADORA ----------------- //Creamos un objeto calculadora en un div del documento unaCalculadora = new calculadora("unaCalculadora", "div-una-calculadora"); //Creamos un emergente para OTRO objeto calculadora emergeCalculadora = new formEmerge("emergeCalculadora", "Calculadora", false, 0, "marco"); //Otro objeto calculadora para el emergente anterior, poniéndolo en su //interior. miCalc = new calculadora("miCalc", PID + "emergeCalculadoraInterior"); //EJEMPLO DEL FORMULARIO EMERGENTE BLOC NOTAS ------------------- //Creamos un emergente para contener el textarea de notas emergeNotas = new formEmerge("emergeNotas", "Notas", false, 0); //Componemos un literal HTML para el interior var interiorNotas = "<textarea rows='10' cols='30' id='textarea-notas' " + "style='font-size: 16px; font-family: Courier New; font-style: normal; " + "font-weight: normal;'></textarea><br />" + "<input type='button' value='opciones' " + "onclick = \"emergeOpciones.abrir('', '', " + "emergeNotas.form().offsetLeft+emergeNotas.form().offsetWidth, " + "emergeNotas.form().offsetTop)\" />"; //Ponemos ese literal en el interior emergeNotas.nuevoInterior(interiorNotas); //Creamos otro emergente con opciones para cambiar el estilo de la //fuente en el textarea de emergeNotas emergeOpciones = new formEmerge("emergeOpciones", "Opciones", false, 3); //Componemos el literal HTML para el interior var contenidoOpciones = "<label>Tamaño fuente: " + "<input type='text' id='tamanyo-fuente-notas' value='' " + "size='2' maxlength='2' "+ "onblur = \"limitaValor(this, 'entero', 6, 48)\" />" + "<label><br />" + "<label>Fuente: " + "<select id='fuente-notas'>" + "<option value='Courier New'>Courier New</option>" + "<option value='Times New Roman'>Times New Roman</option>" + "<option value='Palatino Linotype'>Palatino</option>" + "<option value='Arial'>Arial</option>" + "<option value='Arial Narrow'>Arial Narrow</option>" + "</select>" + "<label><br />" + "<label>Itálica: " + "<input type='checkbox' id='italica-notas' />" + "<label><br />" + "<label>Negrita: " + "<input type='checkbox' id='negrita-notas' />" + "<label>"; //Ponemos ese literal en el interior emergeOpciones.nuevoInterior(contenidoOpciones); //Activamos el evento al abrir el formulaior para que llame a una //función auxiliar opcionesNotas(salida) que está en este script pero //fuera de este window.onload. Con salida=false toma el estilo de la //fuente (tamaño, familia, itálica, negrita) y los pone en los //cuadros de emergeOpciones emergeOpciones.eventoAbrir = true; emergeOpciones.ejecutaEventoAbrir = function(){ opcionesNotas(false); } //Activamos los eventos aceptar y aplicar, ambos con la misma //función opcionesNotas(salida) pero con salida = true para hacer //el proceso contrario: poner las opciones de emergeOpciones en //emergeNotas emergeOpciones.eventoAceptar = true; emergeOpciones.ejecutaEventoAceptar = function(){ opcionesNotas(true); } emergeOpciones.eventoAplicar = true; emergeOpciones.ejecutaEventoAplicar = function(){ opcionesNotas(true); } //EJEMPLO DEL FORMULARIO PARA MENÚ CONTEXTUAL --------------------- //Un emergente para mensajes emergeMensaje = new formEmerge("emergeMensaje", "", false, 0); //Este es el emergente para el contextual. Se abre //con pantalla y sin botones. emergeContextual = new formEmerge("emergeContextual", "", true, 0); //Desactivamos la barra del título del emergente emergeContextual.form("Barra").style.display = "none"; //Aplicamos un evento a la pantalla para que cuando hagamos click //se cierre el contextual document.getElementById(PID + "pantalla").onclick = cerrarFormularios; //Adjudicamos eventos a todos los elementos del documento que sean de //la clase "contextual". La función arrayClassName() la hice para //IE que no admite getElementsByClassName(). var elementosContextuales = arrayClassName("contextual"); for (var i=0; i<elementosContextuales.length; i++){ elementosContextuales[i].onclick = abreContextual; } }//fin del window.onload //Entradas de menú para toda clase de elementos var menuGeneral = "<a class='a-contextual' " + "href='javascript: contextual(\"tag\")'>Tag</a><br />" + "<a class='a-contextual' " + "href='javascript: contextual(\"dom\")'>Analiza DOM</a><hr />" + "<a class='a-contextual' " + "href='javascript: contextual(\"html\")'>Html</a><br />" + "<a class='a-contextual' "+ "href='javascript: contextual(\"texto\")'>Texto</a>"; //Entradas de menú para elementos <input> var menuInput = "<a class='a-contextual' " + "href='javascript: contextual(\"valor\")'>Valor</a><br />" + "<a class='a-contextual' " + "href='javascript: contextual(\"tipo\")'>Tipo</a>"; //En esta variable global se guarda el elemento que genera el contextual var elementoContextual = null;
/* Al abrir el contextual se guarda la referencia * al elemento sobre el que se hizo click. */
function abreContextual(evento){ //Buscamos el evento con mi función recogeEvento() //para unificar diferencias en IE, FF, OP y SA. //Actualizamos la referencia elementoContextual //y obtenemos el punto x,y del evento var evt = recogeEvento(evento); elementoContextual = evt.element; var izquierda = evt.x; var arriba = evt.y; //Seleccionamos el menú que queremos presentar según el //contexto. En este ejemplo hacemos una diferenciación para //los elementos input. var interior = menuGeneral; if (elementoContextual.tagName.toLowerCase() == "input"){ interior += "<hr />" + menuInput; } //Abrimos el menú contextual emergeContextual.abrir(interior, "", izquierda, arriba); }
/* Con esto ejecutamos las entradas del contextual. * El argumento queHacer trae uno de los posibles valores * para ejecutar una acción de menú. */
function contextual(queHacer){ switch (queHacer){ //ENTRADAS DE MENÚ GENERAL case "tag": { //Esto simplemente da un alert sobre el tagName alert("Este elemento es un <" + elementoContextual.tagName + ">"); break; } case "dom": { //La función analizaDOM() es una construcción propia que //sirve para analizar el elemento: tag, hijos, atributos //y estilo actual. var html = analizaDOM(elementoContextual); //Abrimos el emergente de mensajes para presentarlo. //La posición izquierda arriba la tomamos del emergente //contextual usando su médoto form() para acceder al //elemento <form> emergeMensaje.abrir(html, "Analizador del DOM", emergeContextual.form().offsetLeft + emergeContextual.form().offsetWidth, emergeContextual.form().offsetTop, "20em", "10em", "auto"); break; } case "html": { //Extraemos el literal HTML del elemento var html = elementoContextual.innerHTML; if (html == "") { //hemos de poner algo distinto de vacío para que el interior //del emergente vacie el contenido anterior. html = " " } else { //Le quitamos los caracteres reservados pues lo vamos a //a presentar como un literal de texto html = html.replace(/&/g, "&"); html = html.replace(/</g, "<"); html = html.replace(/>/g, ">"); } //Abrimos el emergente de mensajes para presentarlo. emergeMensaje.abrir(html, "HTML del elemento", emergeContextual.form().offsetLeft + emergeContextual.form().offsetWidth, emergeContextual.form().offsetTop, "20em", "10em", "auto"); break; } case "texto": { //La funcion getInnerText() es una construcción propia //para extraer los nodos texto de un elemento, pues FF //no admite elemento.innerText que IE tiene. var texto = getInnerText(elementoContextual); if (texto == "") texto = " " //Abrimos el emergente de mensajes para presentarlo. emergeMensaje.abrir(texto, "Texto interior", emergeContextual.form().offsetLeft + emergeContextual.form().offsetWidth, emergeContextual.form().offsetTop, "20em", "10em", "auto"); break; } //ENTRADAS DE MENÚ PARA LOS INPUT case "valor": { //Esto nos da el atributo value de un input alert("Su valor es \"" + elementoContextual.value + "\""); break; } case "tipo": { //Esto nos da el atributo type de un input alert("Su tipo es \"" + elementoContextual.type + "\""); break; } } }
//Función auxiliar para emergeNotas: //Recibe (con salida=false) los valores de fuente del textarea de //notas y lo pone en las opciones. Con salida=true hace la operación //inversa. function opcionesNotas(salida){ var textareaNotas = document.getElementById("textarea-notas"); if (textareaNotas != null) { //Gestiona la familia de la fuente var elemento = document.getElementById("fuente-notas"); if (elemento != null) { if (salida) { textareaNotas.style.fontFamily = elemento.value; } else { elemento.value = textareaNotas.style.fontFamily; } } //Gestiona el tamaño de la fuente elemento = document.getElementById("tamanyo-fuente-notas"); if (elemento != null) { if (salida) { textareaNotas.style.fontSize = parseInt(elemento.value) + "px"; } else { elemento.value = parseInt(textareaNotas.style.fontSize); } } //Gestiona itálica elemento = document.getElementById("italica-notas"); if (elemento != null) { if (salida) { if (elemento.checked) { textareaNotas.style.fontStyle = "italic"; } else { textareaNotas.style.fontStyle = "normal"; } } else { if (textareaNotas.style.fontStyle == "italic") { elemento.checked = true; } else { elemento.checked = false; } } } //Gestiona negrita elemento = document.getElementById("negrita-notas"); if (elemento != null) { if (salida) { if (elemento.checked) { textareaNotas.style.fontWeight = "bold"; } else { textareaNotas.style.fontWeight = "normal"; } } else { if (textareaNotas.style.fontWeight == "bold") { elemento.checked = true; } else { elemento.checked = false; } } } } }
Estilo CSS
/* ESTILO DEL CALENDARIO --------------------------------------- bloque div previo al calendario con 2 botones y un cuadro de texto para cambiar de mes y año */
div.previo-cal { text-align: center; } div.previo-cal input { font: 0.85em 'Courier New'; text-align: center; }
/* El div donde ubicaremos la tabla del calendario */
div#ubica-calendario{ text-align: center; }
/* La propia tabla del calendario con sus celdas */
div#ubica-calendario table {
font: 0.9em Courier New;
border-collapse: collapse;
/* para poder centrar la tabla en el div */
display: inline;
}
div#ubica-calendario table th {
color: black;
padding-left: 0.5em;
padding-right: 0.5em;
}
div#ubica-calendario table td {
color: black;
font-weight: bold;
text-align: center;
border: gray solid 1px;
}
/* ESTILO PARA LA CALCULADORA -------------------------------- sobreescribimos algún estilo del archivo calculadora-objeto.css para adaptarlo al formulario emergente */
div.PRECALCcalculadora { border: gray solid 1px; background-color: rgb(230,230,205); }
/* ESTILO PARA EL FORMULARIO QUE ENVÍA DATOS-------------------- */
.fuente-mi-form { font: 0.8em Courier New; }
/* ESTILO PARA EL FORMULARIO DE PROPIEDADES--------------------- */
ul.lista-propiedades { margin-left: 0; padding-left: 0; } ul.lista-propiedades li { margin-left: 1.2em; padding-left: 0; } ul.lista-propiedades ul { margin-left: 0em; padding-left: 0; } ul.lista-propiedades ul li { margin-left: 1em; padding-left: 0; }
/* ESTILO PARA EL FORMULARIO POP-UP ---------------------------- */
a.a-contextual { padding: 0.1em; text-decoration: none; font-family: Arial; font-size: 0.9em; color: black; } a.a-contextual:focus, a.a-contextual:hover, a.a-contextual:active { background-color: rgb(49, 99, 98); color: white; }