Code of World

domingo, 12 de julio de 2009

Codeigniter Diagrama de Flujo

Index.php sirve de front controller, inicializa los recursos necesarios para correr codeigniter.
El Router examina la petición HTTP para determinar que debe hacer con ella.
Si existe el archivo en la caché, es mandado directamente al navegador, saltándose el proceso normal de ejecución.
Security. Antes que el controlador sea cargado, la petición HTTP y cualquier información enviada por el usuario es filtrada por seguridad.
El controlador carga el modelo, las librerías base, plugins, helpers, y los recursos necesarios para los procesos especificados en la petición.
La vista es renderizada por el sistema en el navegador y si cacheo está habilitado, es guardad para próximas peticiones.

La información ha sido extraída de la guía de usuario de codeigniter: http://codeigniter.com/user_guide/overview/appflow.html

jueves, 25 de junio de 2009

plugin colorpicker jquery ui

jaEste plugin permite seleccionar colores de la misma forma en que se realiza en photoshop.
La web del proyecto dispone de algunos ejemplos:
http://eyecon.ro/colorpicker/

jueves, 11 de junio de 2009

Ejemplo simpletip (tooltip) plugin jquery

El siguiente ejemplo utiliza el plugin para crear tooltips llamado Simpletip.
Con este código conseguimos poner a una tabla en cada una de sus celdas un tooltip diferente para cada fila, el resultado es algo así:

También podemos cargar el contenido del tooltip por ajax.
Aquí el código rápido de ejemplo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>


<title>TOOLTIP</title>

<style type="text/css">

table tr td{ background-color:yellow;}

.tooltip{ position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color:red; }

</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>

<script type="text/javascript" src="http://jquery-simpletip.googlecode.com/files/jquery.simpletip-1.3.1.js"></script>

<script type="text/javascript">

  $(function(){

      $.each($("table tr td"),function(){

          var cadena = $(this).parent().attr("id");

          var pos = cadena.indexOf("_");

          var id_producto = cadena.substr(pos+1);

          $(this).simpletip({content: $("#tooltip_"+id_producto).html(), fixed: true , position: ["100", "-25"]  });


      });

  });

</script>

</head>

<body>

  <table>

      <tr>

          <th>Nombre</th>

          <th>Dirección</th>


      </tr>

      <tr id="fila_1"><td>Pepe lopez</td><td>c/ el callejon 292</td></tr>

      <tr id="fila_2"><td>Pepe Martinez</td><td>Perrito picasso 92</td></tr>


  </table>

  <div class="tooltip" id="tooltip_1">Tooltip de  prueba1<img width="60" height="30" src="http://www.gamedealdaily.com/product_images/ps3sixaxis.jpg" alt="" /></div>

  <div class="tooltip" id="tooltip_2">Tooltip de  prueba2<img width="60" height="30" src="http://www.gamedealdaily.com/product_images/ps3sixaxis.jpg" alt="" /></div>


</body>

</html>

lunes, 8 de junio de 2009

div con bordes redondeados y ancho fijo

html de ejemplo:


<div class="box">

<h2>Cabecera</h2>

<p>Contenidot</p>

</div>

Imágenes necesarias para el css:

código css:

.box {

width: 418px;

background: #fffce7 url(img/bottom.gif) no-repeat left bottom;

}

.box h2 {

padding: 10px 20px 0 20px;

background: url(img/top.gif) no-repeat left top;

}

.box p {

padding: 0 20px 10px 20px;

}

miércoles, 20 de mayo de 2009

Subida múltiple de ficheros con SWFUpload

Esta librería combina lo mejor de flash y javascript para realizar subida múltiple de ficheros. Podemos incluso crear una barra de progreso con javascript.
La documentación y toda la información necesaria se puede encontrar en la web del proyecto.
Las demos están aquí.