JqueryUI - Botón

jQueryUI proporciona el método button () para transformar los elementos HTML (como botones, entradas y anclajes) en botones temáticos, con administración automática de los movimientos del mouse sobre ellos, todo administrado de manera transparente por jQuery UI.

Para agrupar botones de opción , Button también proporciona un widget adicional, llamado Conjunto de botones . El conjunto de botones se utiliza seleccionando un elemento contenedor (que contiene los botones de opción ) y llamando a .buttonset () .

Sintaxis

los button() El método se puede utilizar de dos formas:

$ (selector, contexto) .button (opciones) Método

El método button (opciones) declara que un elemento HTML debe tratarse como un botón. El parámetro de opciones es un objeto que especifica el comportamiento y la apariencia del botón.

Sintaxis

$(selector, context).button (options);

Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:

$(selector, context).button({option1: value1, option2: value2..... });

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 discapacitado

Esta opción desactiva el botón que se establece en verdadero . Por defecto su valor esfalse.

Option - disabled

Esta opción desactiva el botón que se establece en verdadero . Por defecto su valor esfalse.

Syntax

$( ".selector" ).button({ disabled: true });
2 iconos

Esta opción especifica que se mostrarán uno o dos iconos en el botón: iconos primarios a la izquierda, iconos secundarios a la derecha. El icono principal se identifica por la propiedad principal del objeto y el icono secundario se identifica por la propiedad secundaria. Por defecto su valor esprimary: null, secondary: null.

Option - icons

Esta opción especifica que se mostrarán uno o dos iconos en el botón: iconos primarios a la izquierda, iconos secundarios a la derecha. El icono principal se identifica por la propiedad principal del objeto y el icono secundario se identifica por la propiedad secundaria. Por defecto su valor esprimary: null, secondary: null.

Syntax

$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
3 etiqueta

Esta opción especifica el texto que se mostrará en el botón que anula la etiqueta natural. Si se omite, se muestra la etiqueta natural del elemento. En el caso de botones de radio y casillas de verificación, la etiqueta natural es el elemento <label> asociado con el control. Por defecto su valor esnull.

Option - label

Esta opción especifica el texto que se mostrará en el botón que anula la etiqueta natural. Si se omite, se muestra la etiqueta natural del elemento. En el caso de botones de radio y casillas de verificación, la etiqueta natural es el elemento <label> asociado con el control. Por defecto su valor esnull.

Syntax

$( ".selector" ).button({ label: "custom label" });
4 texto

Esta opción especifica si se mostrará texto en el botón. Si se especifica como falso , el texto se suprime si (y solo si) la opción de iconos especifica al menos un icono. Por defecto su valor estrue.

Option - text

Esta opción especifica si se mostrará texto en el botón. Si se especifica como falso , el texto se suprime si (y solo si) la opción de iconos especifica al menos un icono. Por defecto su valor estrue.

Syntax

$( ".selector" ).button({ text: false });

Funcionalidad predeterminada

El siguiente ejemplo muestra un ejemplo simple de la funcionalidad del widget de botón, sin pasar parámetros al button() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   
   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML buttonexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Este ejemplo demuestra el marcado que se puede usar para los botones: un elemento de botón, una entrada de tipo enviar y un ancla.

Uso de iconos, texto y discapacitados

El siguiente ejemplo demuestra el uso de dos opciones icons, text y disabled en la función de botón de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>

Guardemos el código anterior en un archivo HTML buttonexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Aquí puede ver un botón con un solo icono, un botón con dos iconos y un botón desactivado.

$ (selector, contexto) .button ("acción", params) Método

El método button ("action", params) puede realizar una acción en los botones, como deshabilitar el botón. La acción se especifica como una cadena en el primer argumento (por ejemplo, "deshabilitar" para deshabilitar el botón). Consulte las acciones que se pueden aprobar en la siguiente tabla.

Sintaxis

$(selector, context).button ("action", params);

La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:

No Señor. Acción Descripción
1 destruir

Esta acción elimina por completo la funcionalidad del botón de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta argumentos.

Action - destroy

Esta acción elimina por completo la funcionalidad del botón de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta argumentos.

Syntax

$( ".selector" ).button("destroy");
2 inhabilitar

Esta acción deshabilita la funcionalidad del botón de un elemento. Este método no acepta argumentos.

Action - disable

Esta acción deshabilita la funcionalidad del botón de un elemento. Este método no acepta argumentos.

Syntax

$( ".selector" ).button("disable");
3 habilitar

Esta acción habilita la funcionalidad de botón de un elemento. Este método no acepta argumentos.

Action - enable

Esta acción habilita la funcionalidad de botón de un elemento. Este método no acepta argumentos.

Syntax

$( ".selector" ).button("enable");
4 opción (optionName)

Esta acción recupera el valor de la opción especificada en optionName . Donde optionName es una cadena.

Action - option( optionName )

Esta acción recupera el valor de la opción especificada en optionName . Donde optionName es una cadena.

Syntax

var isDisabled = $( ".selector" ).button( "option", "disabled" );
5 opción

Esta acción recupera un objeto que contiene pares clave / valor que representan el hash de opciones del botón actual.

Action - option

Esta acción recupera un objeto que contiene pares clave / valor que representan el hash de opciones del botón actual.

Syntax

$( ".selector" ).button("option");
6 opción (optionName, valor)

Esta acción establece el valor de la opción de botón asociada con el optionName especificado .

Action - option( optionName, value )

Esta acción establece el valor de la opción de botón asociada con el optionName especificado . Donde optionName es el nombre de la opción para establecer y el valor es el valor para establecer para la opción.

Syntax

$( ".selector" ).button( "option", "disabled", true );
7 opción (opciones)

Esta acción establece una o más opciones para el botón. Donde opciones es el mapa de pares opción-valor para establecer.

Action - option( options )

Esta acción establece una o más opciones para el botón. Donde opciones es el mapa de pares opción-valor para establecer.

Syntax

$( ".selector" ).button( "option", { disabled: true } );
8 actualizar

Esta acción actualiza la visualización del botón. Esto es útil cuando los botones son manejados por el programa y la pantalla no se corresponde necesariamente con el estado interno. Este método no acepta argumentos.

Action - refresh

Esta acción actualiza la visualización del botón. Esto es útil cuando los botones son manejados por el programa y la pantalla no se corresponde necesariamente con el estado interno. Este método no acepta argumentos.

Syntax

$( ".selector" ).button("refresh");
9 widget

Esta acción devuelve un objeto jQuery que contiene el elemento button. Este método no acepta argumentos.

Action - widget

Esta acción devuelve un objeto jQuery que contiene el elemento button. Este método no acepta argumentos.

Syntax

$( ".selector" ).button("widget");

Ejemplo

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso de los métodos destroy () y disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">   
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>

Guardemos el código anterior en un archivo HTML buttonexample.htm y ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado:

Gestión de eventos en botones

Además del método de botón (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor. Método y descripción del evento
1 crear (evento, ui)

Este evento se activa cuando se crea el botón. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - create(event, ui)

Este evento se activa cuando se crea el elemento de botón. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

$( ".selector" ).button({
   create: function( event, ui ) {}
});

Ejemplo

El siguiente ejemplo demuestra el uso del método de evento para la funcionalidad del widget de botón. Este ejemplo demuestra el uso de event create .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

Guardemos el código anterior en un archivo HTML buttonexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado: