Code of World: junio 2009

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;

}

Code of World