944 063 154

Blog

Etiqueta: jQuery

Jquery UI Dialog aparece por detrás de una película flash

Publicado enDesarrollo y Programación

Jquery es un estupendo framework de desarrollo en JavaScript que se puede utilizar en conjunto a los widgets de Jquery UI. Esta combinación de Jquery UI Dialog nos permite dar a nuestras aplicaciones un toque de riqueza a su interfaz de usuario. Y, hablando de Jquery UI, uno de sus widgets más utilizados es Dialog. Lo que nos permite abrir una ventana AJAX en la que podemos insertar formularios o cualquier contenido HTML que nos interese. De la misma forma que podemos insertarlo en un div normal.

Mostrando jQuery UI Dialog

En relación a Jquery UI pueden darse múltiples problemas. Uno de los más frecuentes se da cuando en nuestro contenido tenemos una película flash embebida. En este caso, la ventanita del Dialog Box quedará detrás de la película; haciendo que sea imposible visualizar el contenido de Jquery UI. Para solucionar esto, debemos pasarle el parámetro wmode, un atributo de etiquetas para Flash. Éste se encargará de opacar el código flash que inserta la película flash dentro del contenido.

Para entenderlo mejor, aquí tenemos un ejemplo de un vídeo de blip.tv:

<object width="634";height="387"
           type="application/x-shockwave-flash"
           data="http://blip.tv/play/71yBqdFXAA%2Em4v">
  <param value="http://blip.tv/play/71yBqdFXAA%2Em4v" name="src">
  <param value="true" name="allowfullscreen">
 <param name="wmode" value="opaque">
</object>

HTML templates con JQuery

Publicado enDesarrollo y Programación

Es muy habitual que cuando nos iniciamos en el mundo de la programación, nos acostumbremos a hacerlo siguiendo un determinado patrón. En estos casos, cuando nos toca trabajar con otro lenguaje diferente nos sentimos raros. Por ejemplo, si estás habituado a programar en MVC, tener que realizar tareas en otro código puede resultarte incómodo. Pero, además tener que utilizar un código con el que no estás familiarizado puede tener consecuencias en el propio proyecto. Esto puede llevarnos, por ejemplo, a hardcodear el código HTML de una aplicación. Una práctica demasiado común cuando no se conoce bien el código que que, además nada cómodo, dará como resultado un código poco limpio.

En determinados lenguajes de programación es más difícil encontrarse con código hard-codeado o sucio. Por ejemplo, si sueles utilizar JavaScript, estarás mal acostumbrado a ver código limpio. Algo similar al siguiente script:

var html = "
<li class='" + class + "'>" +
           "<input type='text' id='"+ id +"' /></li>
";

Aunque el código en sí no es del todo incorrecto; cuando tenemos que realizar cambios en nuestra aplicación, algo bastante común en nuestro día a día, necesitaremos separar ese código HTML. De esta forma, además de evitar volvernos locos, estaremos haciendo que el código sea más mantenible. Asimismo, será más sencillo cuando queramos dinamizar el código HTML desde JavaScript.

Escribiendo código HTML desde JavaScript

Una solución para limpiar y ordenar nuestro código HTML consiste en escribir el HTML que vamos a reutilizar desde JavaScript. En el proceso, deberemos seguir una serie de patrones que sustituiremos más adelante por los valores que más nos interesen. Para ello, podemos recurrir a diferentes herramientas, como la biblioteca multiplataforma JQuery de JavaScript. En este caso, si quisiéramos hacer una lista, deberíamos rellenar un elemento como el siguiente <ul>. Es decir, deberíamos recurrir a algo parecido al script que mostramos a continuación:




<ul id="list"></ul>



Una vez hayamos indicado en el código HTML que los elementos que introduciremos a continuación forman parte de una lista; deberíamos colocar justo antes de terminar el body el siguiente bloque de código HTML:




<div id="bloque_lista" style="display:none">

  

<li class="|class|">
   <input type=”text” id=”input|row_id|” />
 </li>


</div>



Para rellenar la lista con los elementos que necesitamos listar, bastaría con sustituir los patrones |class| y |row_id| por los valores que necesitemos. En cada uno de ellos iremos especificando los elementos que compondrán nuestra lista.


function addItemToList() {

   var list     = $('#list');
   var class    = "rosa";
   var template = $('#bloque_lista').html();

   template = template.replace(/|class|/gi, class)

   for(var id=1;id<11;id++){

     list.append(template.replace(/|row_id|/gi, id));

   }

}

Recurriendo a este tipo de prácticas, nuestro código HTML estará mucho más ordenado. Así, las modificaciones se podrán realizar de una forma más fácil y rápida; tanto si somos nosotros quienes tenemos que hacerlas, como si es alguien que no está acostumbrado a nuestro código. Porque peor que trabajar con un código que no conoces es no poder hacerlo porque está tan desordenado que es tarea imposible.