Anatips es una librería para hacer tooltips y es muy sencillo de utilizar. Ha sido probado con Firefox 2+, IE 6+, Opera 9+, y Safari 3.1

Ahora explicaremos como implementarlo en una imagen, para este ejemplo utilizaremos Prototype 1.6.0. Para ello descargaremos Anatips desde aqui, que nos vendrá con Prototype.

Crearemos un archivo .html en incluiremos en el head los javascript y CSS

<script src="builder.js type="text/javascript"></script>
<script src="prototype.js type="text/javascript"></script>
<script src="anatips.js type="text/javascript"></script>
<link href="anatips.css" media="screen" type="text/css" />

Dentro del body incluiremos una imagen con class="anatips" y con title="Descripción Tooltip", el class sera para identificar que el title debe mostrase como el estilo tooltip de Anatips.

<img src="foo.jpg" class="anatips" title=""/>

Recursos

• Ver Demo
• Descargar Anatips

Post Relacionados

• Top 10 librerías para gráficos en php
• 5 librerías para generar PDF con PHP
• Tutorial MVC con PHP
• Tabs CSS simples con jQuery
• Mostrar archivos ocultos en Mac
• 20 Plantillas CSS Gratuitas
• El mejor IDE para PHP
• 10 Excelentes plugins jQuery para formularios

MultiDropDown es un script para realizar la tarea de convertir una respuesta json en elementos de un dropdown, y poder construir dropdowns relacionales. Este script esta probado en distintos navegadores(Firefox 2+, IE 6+, Safari 9+).

Características

• Su implementación es muy sencilla.
• El dropdown puede ser totalmente modificable.
• Soporta dropdowns dependientes.

Implementación

Para este ejemplo utilizaremos PHP y MySQL, primero entramos a un administrador para MySQL, sea PHPMyAdmin u otro y ejecutamos este script.

CREATE DATABASE `librerias` ;

CREATE TABLE `librerias`.`lista` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nombre` VARCHAR( 50 ) NOT NULL
) 

CREATE TABLE `librerias`.`detalle` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`lista_id` INT NOT NULL ,
`nombre` VARCHAR( 50 ) NOT NULL
) 

INSERT INTO lista(id ,nombre)
VALUES 
('1', 'Javascript'), 
('2', 'CSS'), 
('3', 'PHP'),

INSERT INTO detalle(`id` ,`lista_id` ,`nombre`)
VALUES 
('1', '1', 'Prototype'),
('2', '1', 'Mootools'),
('3', '1', 'jQuery'),
('4', '1', 'YUI'),
('5', '1', 'Dojo'),
('6', '2', 'BluePrint'),
('7', '2', 'DockMenu'),
('8', '2', 'Multibox'),
('9', '3', 'CSS dropdown Menu'),
('10', '3', 'FPDF'),
('11', '3', 'JPGraph'),
('12', '3', 'PHPLinq'),
('13', '3', 'PHPMailer');

Este script creara una DB(librerias), dos tablas (lista y detalle) y llenara con algunos registros las tablas. La tabla detalle es dependiente de lista por en campo lista_id.

Ahora construiremos dos archivos .php (json_lista.php y json_detalle.php), en los cuales incluiremos este código respectivamente.

// json_lista.php
//incluimos la conexion
require 'cn.php'; 
//guardamos la consulta
$query = "SELECT *FROM lista";
//ejecutamos la consulta
$rs = mysql_query($query);
$rows=array();
//recorremos los registros retornados
while($row=mysql_fetch_assoc($rs))
{
	$rows[]=$row;
}
//devolvemos en formato json la data
echo json_encode($rows);

// json_detalle.php
//incluimos la conexion
require 'cn.php';
//recibimos el parámetro (lista_id)
$param = (int)$_REQUEST['id'];
$rows=array();
//verificamos el parametro
if ($param!=0)
{
	//guardamos la consulta
	$query = "SELECT *FROM detalle WHERE lista_id='$param'";
	//ejecutamos la consulta
	$rs = mysql_query($query);
	//recorremos los registros retornados	
	while($row=mysql_fetch_assoc($rs)){
		$rows[]=$row;
	}	
}
//devolvemos en formato json la data
echo json_encode($rows);

Eso es todo del lado del servidor, este es un ejemplo claro en el ámbito del trabajo. Ahora pasemos a la vista del usuario con el html.

Primero debemos incluir la librería Prototype.js y multidropdown.js en el head de tu pagina web.

<script src="prototype.js" type="text/javascript"></script>>
<script src="multidropdown.js" type="text/javascript"></script>

Ahora pondremos dos dropdown, uno sera la lista cabecera y la otra sera su detalle la cual se llenara nuevamente en el evento onchange de la cabecera.

Listas 
<select id="lista" name="lista">
<option value="0">vacio</option>
</select> 
Detalles 
<select id="deta" name="deta">
<option value="0">vacio</option>
</select>

Luego nos queda nada mas que llamar a la función que generara los dropdown.

//parametro url,id_dropdown
getJson('json.php','lista');
//carga de lista dependiente
$('lista').observe('change',
	function(el){ 
		getJson('json2.php','deta',$F('lista')) 
	});

Recursos

• Ver Demo
• Descarga Script

Post Relacionados

• TextboxList con Autocompleter
• Obtener el número de retweets de Tweetmeme
• Detectar peticiones Ajax con PHP
• Introduccion a JSON
• Generar Captura de pantalla con Ajax
• TwitterGitter: lista tus tweets con ajax
• Actualizar Twitter remotamente con PHP
• MySQL to JSON

<select id="listaEmp" >
<option value="0001">  Buchanan, Steven    </option>
<option value="0002">  Callahan, Laura     </option>
<option value="0003">  Davolio, Nancy      </option>
</select>
<a onclick="showOptions()"> Show </a>

showOptions =   function()
{
  var opList  =   $('listaEmp').getElementsByTagName('option');
  var ops     =   $A(opList);
  var emps    =   'Lista de Empleados:\n';
  ops.each(
  function(op)
  {
    emps+= op.value+': '+op.innerHTML+'\n';
  }
  );
  alert(emps);
}

testHash    =   function ()
{
  // Primero creamos el objeto
  var params  =   {
  nombre:     'Cesar',
  apellido:   'Mancilla',
  edad    :   '20'
  };
  // Lo transformamos en un Hash
  var hash    =   $H(params);
  alert(hash.toQueryString());
  // -> nombre=Cesar&apellido=Mancilla&edad=20
}
testHash();

// Se muestran una iteracion de alertas con el valor actual.
$R(0,10,false).each(function(valor){alert(valor)})
// el recorrido es de 13 veces
$R(0,10,true).each(function(valor){alert(valor)})
// el recorrido es de 12 veces
// Devuelve un booleano si 10 esta incluido en el rango
var bol = $R(0,10).include(10);
alert(bol);
// La funcion $A()
// convierte el objetrange en un array object
// luego inserta la coma ', '
$A($R(0,10)).join(', ');
//-> '0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10'

labels=$w('blogs css javascript tutoriales')
//-> ['blogs', 'css', 'javascript', 'tutoriales']
// muy util por ejemplo para guardar una pagina
// con varias etiquetas separas por un espacio
// ejm:(delicious)
// y despues grabar cada etiqueta para un link
labels.each(function(element){ // guardarLabels(); })

Post Relacionados

• Top 10 librerías para gráficos en php
• 5 librerías para generar PDF con PHP
• Tutorial MVC con PHP
• Tabs CSS simples con jQuery
• Mostrar archivos ocultos en Mac
• 20 Plantillas CSS Gratuitas
• El mejor IDE para PHP
• 10 Excelentes plugins jQuery para formularios

Prototype Capitulo 03 - Utilizando la funcion $$()

• document.getElementById()
• document.getElementsByTagName()
• document.getelementsByClassName()

$$('div');
// retorna todos los divs en el documento

$$('#contents');
// es lo mismo que $('contents'),
// solo que devuelve siempre un array

$$('li.faux');
// retorna todos los elementos li
// que tengan clase faux

<div id='frmLogin'>
<div class='campo'>
<span class='NombreCampo'>
Nombre Usuario:
</span>
<input type='text' id='txtNombre' value='cesar' />
</div>
<div class='campo'>
<span class='NombreCampo'>
Password:
</span>
<input type='password' id='txtPassword' value='123' />
</div>
<input type='submit' value='Login' />
</div>
<input type='button' onClick='test()' value='Funcion $$()' />

function test()
{
  var s=$$('div#frmLogin .campo input');
  var inputs='';
  for(var i=0; i<s.length; i++)
  {
    inputs+= s[i].value+' // ';
  }

  alert(inputs); //muestra cesar // 123
}

Post Relacionados

• Detectar peticiones Ajax con PHP
• Generar Captura de pantalla con Ajax
• Multidropdown: menus relacionales con Prototype
• Convertir tu web estatica a Ajax
• TextboxList con Autocompleter
• Prototype Introduccion
• Ajax : Introducción y Ejemplos

document.getElementById('id')

<etiqueta id="id"> 
  Contenido... 
</etiqueta>

$('id').innerHTML
//-$gt;  Contenido...

$('id').hide()  
//Oculta el contenido de la etiqueta

//tambien lo puedes hacer en la forma
//multiple, con mas etiquetas

$('id1', 'id2', 'id3').invoke('hide');

//tambien puedes hacer mas optimo el codigo
//al llamar a varios metodos en una sola linea

$('id').update('Cambiando Contenido')
       .addClassName('clase')
       .show();

//Primero Actualizamos el Contenido del Div.
//Agregamos una clase CSS.
//Lo Mostramos

$('frm').serialize()
//hace la serializacion de Elementos del formulario
//para pasarlo como parametros

$('TextBox').value
//return texto

$('TextBox').focus()
// se enfoca en el elemento del formulario

Post Relacionados

• Detectar peticiones Ajax con PHP
• Generar Captura de pantalla con Ajax
• Multidropdown: menus relacionales con Prototype
• Convertir tu web estatica a Ajax
• TextboxList con Autocompleter
• Prototype : Funciones DOM
• Ajax : Introducción y Ejemplos

Ajax ¿Para que sirve?

Ajax y las Aplicaciones de Escritorio

Significado

Es solamente otra moda pasajera?

Ejemplo:

Google Maps, un Ejemplo claro

Post Relacionados

• Detectar peticiones Ajax con PHP
• Generar Captura de pantalla con Ajax
• Multidropdown: menus relacionales con Prototype
• Convertir tu web estatica a Ajax
• TextboxList con Autocompleter
• Prototype : Funciones DOM
• Prototype Introduccion