Botones con JQuery UI InformaticaPC

Button (botón)

Este componente permite crear botones más personalizables (con la capacidad de tomar la configuración del theme activo), permitiéndonos crear una barra de herramientas.

Sus propiedades son:

disabled: muestra u oculta el botón.
icons: permite mostrar iconos.
label: especifica el texto del botón.
text: permite mostrar u ocultar el texto definido en la propiedad anterior.

Entre otros dispone de los siguientes métodos:

enable(): muestra el botón.
disable(): lo desactiva.

Veamos con un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | botones con JQuery UI</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
    </style>

    <!-- Observa que agregamos también la librería JQuery UI -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>

    <!-- Agregamos también el archivo CSS del theme que usemos -->
    <link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />

    <script type="text/javascript">

        $(document).ready(function()
        {
            $("#boton").click(function(){
                $("#boton").button();
                $("#enlace").button();
            })
        });

    </script>
  </head>

  <body>

      <input type="button" id="boton" value="Pulsa aquí" />
      <a id="e" href="#">Esto es un enlace</a>

  </body>

</html>

Ejemplo

Vea también: [ Button ] - [ Button (ejemplo) ]

Tutorial de JQuery

Button (botón)