Bienvenid@s, hoy os mostraré una manera de crear radio buttons personalizados, de la forma que lo podrías obtener con Jquery UI o
Bootstrap, para ello haremos uso tanto de Jquery como de CSS3, el proceso es bastante simple primeramente se crea una lista ...
<ul class="radio-group"> <li value="uno" class="radio-group-active">Uno</li> <li value="dos">Dos</li> <li value="tres">Tres</li> <li value="cuatro">Cuatro</li> <li value="cinco">Cinco</li> <li value="seis">Seis</li> <li value="siete">Siete</li> <li value="ocho">Ocho</li> <li value="nueve">Nueve</li> </ul>
Como puedes ver a la lista le he añadido una clase llamada "radio-group", que será la clase principal a la cual le iremos aplicando estilos para crear el grupo de radio buttons, también puedes ver como hay otra clase llamada "radio-group-active", esta clase será la encargada de poner el foco en el radio activo y por último también puedes ver un atributo value para cada uno de los radio buttons con su respectivo valor.
Al hacer click sobre el radio button, mostraremos su valor en un input text, el código completo del código está debajo del ejemplo, también recalcar que las propiedades principales para crear el radio grupo son display : inline; y float: left; con estas dos propiedades se consigue crear un grupo compacto.
Para la parte Jquery simplemente se captura el evento click y se le añade la clase "radio-group-active", al radio seleccionado, así como se pasa el valor del mismo al input text, esto es útil para pasar el valor a un formulario con un campo oculto por ejemplo.
A continuación puedes ver la demo ...
Y a continuación el código completo del ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como crear radio buttons con Jquery y CSS3</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".radio-group li").bind("click", function(){
$(".radio-group li").removeClass("radio-group-active");
$(this).addClass("radio-group-active");
val = $(this).attr("value");
$("#radio-value").val(val);
});
});
</script>
<style>
.radio-group li
{
float: left;
display: inline;
list-style: none;
border-left: 1px solid #DBE1EB;
border-bottom: 1px solid #DBE1EB;
border-top: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
background: #454F6F;
background: linear-gradient(top, #454F6F, #5D6684);
background: -moz-linear-gradient(top, #454F6F, #5D6684);
background: -webkit-linear-gradient(top, #454F6F, #5D6684);
background: -o-linear-gradient(top, #454F6F, #5D6684);
color: #FFFFFF;
}
.radio-group li:first-child
{
border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
-o-border-radius: 4px 0px 0px 4px;
}
.radio-group li:last-child
{
border-radius: 0px 4px 4px 0px;
-moz-border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
-o-border-radius: 0px 4px 4px 0px;
}
.radio-group:hover
{
cursor: pointer;
}
.radio-group-active
{
background: #8A92AA !important;
background: linear-gradient(top, #8A92AA, #A1A7BC) !important;
background: -moz-linear-gradient(top, #8A92AA, #A1A7BC) !important;
background: -webkit-linear-gradient(top, #8A92AA, #A1A7BC) !important;
background: -o-linear-gradient(top, #8A92AA, #A1A7BC) !important;
}
</style>
</head>
<body>
<ul class="radio-group">
<li value="uno" class="radio-group-active">Uno</li>
<li value="dos">Dos</li>
<li value="tres">Tres</li>
<li value="cuatro">Cuatro</li>
<li value="cinco">Cinco</li>
<li value="seis">Seis</li>
<li value="siete">Siete</li>
<li value="ocho">Ocho</li>
<li value="nueve">Nueve</li>
</ul>
<br /><br /><br />
Valor del radio button: <input type="text" id="radio-value">
</body>
</html>
No hay comentarios:
Publicar un comentario