En este posts veremos lo fácil que es crear nuevos atributos con Jquery, para ello seguiremos el mismo procedimiento que utilizan los famosos jquery mobile o bootstrap, si alguna vez has utilizado algunas de estas librerías te habrás podido dar cuenta del uso constante de nuevos atributos, por ejemplo en jquery mobile el atributo data-role, entre otros o en bootstrap el atributo role, entre otros, también muchos plugins de Jquery los contienen, la ventaja de usar nuevos atributos, es que éstos interactúan con Jquery, evitando así mencionarlos explícitamente a través de más código Jquery.
En el siguiente ejemplo hay un div que contiene un nuevo atributo llamado corner, este atributo establecerá si el elemento tendrá los border redondeados o no ...
<style>
#box_prueba{width: 250px; height: 250px; border: 1px solid grey;}
</style>
<div id="box_prueba" corner="true"></div>
Como se puede observar corner="true" lo cual estamos indicando que si queremos que este elemento tenga los bordes redondeados.
Ahora hacemos uso de Jquery para que detecte el valor de este nuevo atributo "corner" ...
<script>
$(function(){
box = $("#box_prueba");
if(box.attr("corner", "true"))
{
box.css({borderRadius: "5px"});
}
else
{
box.css({borderRadius: "0px"});
}
});
</script>
Como se puede ver si corner = true, el elemento box obtendrá un border-radius de 5 píxeles, de los contrario no.
DEMO ...
Esta forma de utilizar atributos simplifica mucho el trabajo y la usabilidad de plugins.
No hay comentarios:
Publicar un comentario