944 063 154

Blog

Etiqueta: jQuery

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

Publicado enDesarrollo web

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 web

A veces nos acostumbramos a programar siguiendo un determinado patrón. Por ejemplo, si estás habituado a hacerlo siguiendo MVC, tener que realizar tareas en otro código puede resultarte incómodo. Esto puede ser el caso de hardcodear el código HTML en el código interno de una aplicación; nos resultará, además nada cómodo, poco limpio. Sin embargo, si por el contrario, sueles utilizar JavaScript, estarás mal acostumbrado a ver código limpio; como puede ser el siguiente script:


var html = "

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


";

Aunque el código en sí no es incorrecto; cuando tenemos que realizar cambios en nuestra aplicación (situación bastante común) sin volvernos locos, necesitaremos separar o hacer más mantenible ese HTML que queremos dinamizar desde JavaScript.

Escribiendo código HTML desde JavaScript

Una solución consiste en escribir el HTML que vamos a reutilizar desde JavaScript; con una serie de patrones que sustituiremos más adelante por los valores que nos interesen. Para ello, podemos recurrir a la biblioteca multiplataforma JQuery de JavaScript. En este caso, si quisiéramos rellenar un elemento como el siguiente <ul> deberíamos recurrir al script que mostramos a continuación:




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



Junto antes de terminar el body colocaríamos 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, bastaría con sustituir los patrones |class| y |row_id| por los valores que necesitemos.


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));

   }

}