Evitar colisiones de nombres en plugins jQuery

En un proyecto en el que estoy trabajando estoy utilizando el excelente framework HTML/CSS/Javascript Twitter Bootstrap y también jQuery UI. Bootstrap ofrece plugins jQuery para diversos efectos y controles en el interfaz de usuario. Uno de ellos es el plugin  button, el cual amplía la funcionalidad de checkboxes, radio buttons y demás. Por otra parte, jQuery UI también proporciona, entre otros el plugin "button", con una funcionalidad y una API diferente. 

Botones de Twitter Bootstrap

Botones de jQuery UI

El problema de utilizar simultáneamente estas dos bibliotecas es que ambas definen el mismo símbolo dentro del listado de plugins de jQuery. Para cualquiera de las dos, la instanciación es igual:


$(elemento).button();


Si hacemos las instanciación del plugin de la manera anterior, obtendremos como resultado el botón de la última biblioteca que hayamos cargado en nuestra página. Por ejemplo, si tenemos esto en nuestro HTML:


...

<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>

...

<script type="text/javascript">

$(".miboton1").button();   // botón jQueryUI
$(".miboton2").button();   // botón jQueryUI

</script>

El resultado será que todas las llamadas a $(elemento).button() darán como resultado el botón de jQueryUI. Si invertimos el orden de carga de las dos bibliotecas el resultado, como es de esperar, será el inverso.

Para poder utilizar simultáneamente los dos plugins de botones en nuestra aplicación tendremos que renombrar mediante un alias cualquiera de los dos plugins tras la carga del primero de ellos de la siguiente manera:

<script type="text/javascript" src="bootstrap.min.js"></script>

<script type="text/javascript">

// renombrar plugin $().button de bootstrap 

// para evitar colisión de nombres

$.fn.bbutton = $.fn.button;

</script>

<script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>

...

<script type="text/javascript">

$(".miboton1").button()   // botón jQueryUI
$(".miboton2").bbutton()  // botón Bootstrap

</script>

Ahora tendremos $(elemento).button() para los botones jQueryUI y $(elemento).bbutton() para los botones Twitter Bootstrap. Podemos hacer lo mismo para cualquier otra colisión de nombres de otros plugins.

Mario J. Barchéin Molina.