sábado, 13 de julio de 2013

Crear nuevos atributos con Jquery


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.