JqueryUI - Botão

jQueryUI fornece o método button () para transformar os elementos HTML (como botões, entradas e âncoras) em botões temáticos, com gerenciamento automático de movimentos do mouse sobre eles, tudo gerenciado de forma transparente pelo jQuery UI.

Para agrupar botões de opção, Button também fornece um widget adicional, chamado Buttonset . O conjunto de botões é usado selecionando um elemento de contêiner (que contém os botões de opção) e chamando .buttonset () .

Sintaxe

o button() método pode ser usado em duas formas -

$ (seletor, contexto) .button (opções) Método

O método de botão (opções) declara que um elemento HTML deve ser tratado como botão. O parâmetro options é um objeto que especifica o comportamento e a aparência do botão.

Sintaxe

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

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

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

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -

Sr. Não. Opção e descrição
1 Desativado

Esta opção desativa se o botão for definido como verdadeiro . Por padrão, seu valor éfalse.

Option - disabled

Esta opção desativa se o botão for definido como verdadeiro . Por padrão, seu valor éfalse.

Syntax

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

Esta opção especifica que um ou dois ícones devem ser exibidos no botão: ícones primários à esquerda, ícones secundários à direita. O ícone principal é identificado pela propriedade primária do objeto, e o ícone secundário é identificado pela propriedade secundária. Por padrão, seu valor éprimary: null, secondary: null.

Option - icons

Esta opção especifica que um ou dois ícones devem ser exibidos no botão: ícones primários à esquerda, ícones secundários à direita. O ícone principal é identificado pela propriedade primária do objeto, e o ícone secundário é identificado pela propriedade secundária. Por padrão, seu valor éprimary: null, secondary: null.

Syntax

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

Esta opção especifica o texto a ser exibido no botão que substitui o rótulo natural. Se omitido, o rótulo natural para o elemento é exibido. No caso de botões de opção e caixas de seleção, o rótulo natural é o elemento <label> associado ao controle. Por padrão, seu valor énull.

Option - label

Esta opção especifica o texto a ser exibido no botão que substitui o rótulo natural. Se omitido, o rótulo natural para o elemento é exibido. No caso de botões de opção e caixas de seleção, o rótulo natural é o elemento <label> associado ao controle. Por padrão, seu valor énull.

Syntax

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

Esta opção especifica se o texto deve ser exibido no botão. Se especificado como falso , o texto será suprimido se (e somente se) a opção de ícones especificar pelo menos um ícone. Por padrão, seu valor étrue.

Option - text

Esta opção especifica se o texto deve ser exibido no botão. Se especificado como falso , o texto será suprimido se (e somente se) a opção de ícones especificar pelo menos um ícone. Por padrão, seu valor étrue.

Syntax

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

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade de widget de botão, sem passar parâmetros para o 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>

Vamos salvar o código acima em um arquivo HTML buttonexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Este exemplo demonstra a marcação que pode ser usada para botões: um elemento de botão, uma entrada do tipo enviar e uma âncora.

Uso de ícones, texto e desativado

O exemplo a seguir demonstra o uso de duas opções icons, text e disabled na função de botão do 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>

Vamos salvar o código acima em um arquivo HTML buttonexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Aqui você pode ver um botão com apenas um ícone, um botão com dois ícones e um botão desativado.

$ (seletor, contexto) .button ("action", params) Método

O método de botão ("ação", parâmetros) pode realizar uma ação nos botões, como desabilitar o botão. A ação é especificada como uma string no primeiro argumento (por exemplo, "desativar" para desativar o botão). Confira as ações que podem ser aprovadas, na tabela a seguir.

Sintaxe

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

A tabela a seguir lista as diferentes ações que podem ser usadas com este método -

Sr. Não. Ação e Descrição
1 destruir

Esta ação remove a funcionalidade do botão de um elemento completamente. Os elementos retornam ao seu estado pré-inicial. Este método não aceita nenhum argumento.

Action - destroy

Esta ação remove a funcionalidade do botão de um elemento completamente. Os elementos retornam ao seu estado pré-inicial. Este método não aceita nenhum argumento.

Syntax

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

Esta ação desativa a funcionalidade do botão de um elemento. Este método não aceita nenhum argumento.

Action - disable

Esta ação desativa a funcionalidade do botão de um elemento. Este método não aceita nenhum argumento.

Syntax

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

Esta ação ativa a funcionalidade de botão de um elemento. Este método não aceita nenhum argumento.

Action - enable

Esta ação ativa a funcionalidade de botão de um elemento. Este método não aceita nenhum argumento.

Syntax

$( ".selector" ).button("enable");
4 opção (optionName)

Esta ação recupera o valor da opção especificada em optionName . Onde optionName é uma String.

Action - option( optionName )

Esta ação recupera o valor da opção especificada em optionName . Onde optionName é uma String.

Syntax

var isDisabled = $( ".selector" ).button( "option", "disabled" );
5 opção

Esta ação recupera um objeto que contém pares de chave / valor que representam o hash de opções do botão atual.

Action - option

Esta ação recupera um objeto que contém pares de chave / valor que representam o hash de opções do botão atual.

Syntax

$( ".selector" ).button("option");
6 opção (optionName, value)

Esta ação define o valor da opção de botão associada ao optionName especificado .

Action - option( optionName, value )

Esta ação define o valor da opção de botão associada ao optionName especificado . Onde optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção.

Syntax

$( ".selector" ).button( "option", "disabled", true );
7 opção (opções)

Esta ação define uma ou mais opções para o botão. Onde options é o mapa de pares de opção-valor a definir.

Action - option( options )

Esta ação define uma ou mais opções para o botão. Onde options é o mapa de pares de opção-valor a definir.

Syntax

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

Esta ação atualiza a exibição do botão. Isso é útil quando os botões são controlados pelo programa e o visor não corresponde necessariamente ao estado interno. Este método não aceita nenhum argumento.

Action - refresh

Esta ação atualiza a exibição do botão. Isso é útil quando os botões são controlados pelo programa e o visor não corresponde necessariamente ao estado interno. Este método não aceita nenhum argumento.

Syntax

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

Esta ação retorna um objeto jQuery contendo o elemento de botão. Este método não aceita nenhum argumento.

Action - widget

Esta ação retorna um objeto jQuery contendo o elemento de botão. Este método não aceita nenhum argumento.

Syntax

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

Exemplo

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso dos métodos destroy () e 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>

Vamos salvar o código acima em um arquivo HTML buttonexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -

Gerenciamento de eventos em botões

Além do método de botão (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um evento específico. Esses métodos de evento estão listados abaixo -

Sr. Não. Método e descrição do evento
1 criar (evento, ui)

Este evento é acionado quando o botão é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - create(event, ui)

Este evento é disparado quando o elemento do botão é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

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

Exemplo

O exemplo a seguir demonstra o uso do método de evento para a funcionalidade do widget de botão. Este exemplo demonstra o uso de criação de evento .

<!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>

Vamos salvar o código acima em um arquivo HTML buttonexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -