The Dynamic Duo - Botones Radio

Botones Radio - Objeto Radio

Para reemplazar la necesidad de un standard botón de radio (standard radio buttons), he escrito mi propio Radio Object.

Para utilizar este objeto debes de tener imágenes para los dos estados del radio buttons:

radio0.gif (false)
radio1.gif (true)

Y debes de re-cargarlos :

preload('radio0','radio0.gif')
preload('radio1','radio1.gif')

Inicio de Radio Objects:

Este es un formato general para el Radio Object:

objectName = new Radio(layer,imgNames,length,defaultValue)

Donde:

layer - la capa de radio buttons estan en
imgNames - los NAMES la IMG tags (ver abajo)
length - el numero de radio buttons el la lista
defaultValue - (optional) el valor de ausencia del radio button

Para mi ejemplo voy a tener una lista para ver el número de computadoras en una casa de familia (de 1 a 4), otra vez lo he puesto en la capa "surveyDiv", y quiero el valor de normal (default) que sea dos "two":

computers = new Radio('surveyDiv','computersImg',4,'two')

HTML para el Radio Object:

Cuando escribas el HTML tienes que enseñar la imagen en falso "false"; es el estado para todas las imágenes excepto una de ellas (la que haz escogido que sea la default de verdadero ("true"). En mi caso he puesto el segundo radio button como verdadero ("true"). Después he llamado a cada imagen de una manera consistente "computersImg0", "computersImg1" etc. El nombre "computersImg" es el nombre de la imagen (imgNames) para el Radio Object.

<P>Numero de computadoras en tu casa de familia:
<BR><A HREF="javascript:computers.change(0,'one')"><IMG NAME="computersImg0" SRC="radio0.gif" WIDTH=10 HEIGHT=10 BORDER="0"> one
<BR><A HREF="javascript:computers.change(1,'two')"><IMG NAME="computersImg1" SRC="radio1.gif" WIDTH=10 HEIGHT=10 BORDER="0"> two
<BR><A HREF="javascript:computers.change(2,'three')"><IMG NAME="computersImg2" SRC="radio0.gif" WIDTH=10 HEIGHT=10 BORDER="0"> three
<BR><A HREF="javascript:computers.change(3,'four')"><IMG NAME="computersImg3" SRC="radio0.gif" WIDTH=10 HEIGHT=10 BORDER="0"> four

Utilización del Radio Object:

El hyperlink alrededor de los dos, la imagen y del texto es indicado en el método change() del Radio Object.

objectName.change(index,value)

Donde:

index - índex número de la lista radio botón (button list )(en mismo número en el atributo IMG NAME )
value - el valor associado con ese radio button.

Cuando vas a recuperar el valor del radio button, simplemente escribe:

objectName.value

Ejemplo: radio1.html[fuente] para un ejemplo radio button.

Fuente de Código

radio.js