jQuery UI API - Componente Button (Pulsante Widget)

categoria

Widget (Widget)

uso

Descrizione: tasti themable e pulsanti.

Nuova versione: 1.8

componente Button (Pulsante Widget) rafforzare la funzionalità degli elementi del modulo standard, come i pulsanti (pulsante), l'ingresso (input), ancore (ancora), con l'hover appropriata (hover) e l'attivazione di stile (attivo) al tema del pulsante.

Oltre ai pulsanti di base, i pulsanti di opzione e caselle di controllo (tipo di ingresso di radio e checkbox) possono anche essere convertiti in un pulsante. Versioni (etichetta) è progettato stili di pulsanti, aggiornare cliccato l'ingresso sottostante. Per poter funzionare correttamente, è necessario immettere un id di attributo, e il punto di etichetta (etichetta) è for immobili. Non di ingresso in etichetta (etichetta) all'interno, altrimenti causare problemi di accessibilità .

Per i pulsanti packet radio, Button fornisce anche un widget aggiuntivo chiamato Buttonset. Buttonset selezionando un elemento contenitore (compreso pulsanti di opzione) e chiamare .buttonset() da utilizzare. Buttonset fornisce anche un raggruppamento visiva, in modo che quando vi è un pulsante può considerare utilizzarlo. Seleziona tutti i discendenti e la loro applicazione .button() . È possibile attivare e disattivare una serie di pulsanti, che attivare e disattivare tutti i pulsanti inclusi. Distruzione Pulsante manifestazione chiamando di ciascun pulsante destroy metodo. Per i pulsanti di opzione e caselle di controllo si raccomanda tasto raggruppamento da utilizzare con la legend del fieldset di fornire un'etichetta pacchetto accessibile.

Quando si utilizza un tipo di pulsante, inviare o reimpostare l'ingresso, il supporto è limitato a testo normale senza etichette delle icone.

tematizzazione

componente Button (Pulsante Widget) utilizzando framework jQuery UI CSS per definire l'aspetto del suo stile. Se è necessario utilizzare i tasti stile specificato, è possibile utilizzare il seguente nome della classe CSS:

• ui-button : elementi DOM che rappresentano il pulsante. Questo elemento sarà basato su testo e icone per aggiungere una delle seguenti opzioni di classe: ui-button-text-only , ui-button-icon-only , ui-button-icons-only , ui-button-text-icons .
  • ui-button-icon-primary : gli elementi principali delle icone dei pulsanti per la visualizzazione. Solo quando l'icona principale di icone fornire opzioni al momento della presentazione.
  • ui-button-text : un contenitore di tutto il contenuto del testo di un pulsante.
  • ui-button-icon-secondary : I tasti del display secondario per le icone. Solo quando l'icona secondarie icone forniscono opzioni al momento della presentazione.
• ui-buttonset : Buttonset contenitore esterno.

fare affidamento

• nucleo UI (UI Core)
• Component Library (Widget Factory)

Ulteriori informazioni

• La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.

navigazione rapida

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

// getter
var disabled = $( ".selector" ).button( "option", "disabled" );
 
// setter
$( ".selector" ).button( "option", "disabled", true );
	

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

// getter
var icons = $( ".selector" ).button( "option", "icons" );
 
// setter
$( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } );
	

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

// getter
var label = $( ".selector" ).button( "option", "label" );
 
// setter
$( ".selector" ).button( "option", "label", "custom label" );
	

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

// getter
var text = $( ".selector" ).button( "option", "text" );
 
// setter
$( ".selector" ).button( "option", "text", false );
	

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

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

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

var isDisabled = $( ".selector" ).button( "option", "disabled" );
	

var options = $( ".selector" ).button( "option" );
	

$( ".selector" ).button( "option", "disabled", true );
	

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

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

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

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

$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );
	

Esempi

Un pulsante di jQuery UI semplice (Button).

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> membro pulsante (Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Button> etichetta del pulsante </ button>
 
<Script>
$ ( "Button") apri un ();
</ Script>
 
</ Corpo>
</ Html>

Visualizza demo

Un semplice pulsante di impostazione jQuery UI (Buttonset).

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> membro pulsante (Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Form>
  <Fieldset>
    <Leggenda> progetto preferito jQuery </ legend>
    <Div id = "radio">
      <Input type = "radio" id = "sfrigolio" name = "progetto">
      <Label for = "sfrigolio"> Sizzle </ label>
 
      <Input type = "radio" id = name = "progetto" "qunit" controllata = "controllato">
      <Label for = "qunit"> QUnit </ label>
 
      <Input type = "radio" id = nome "colore" = "progetto">
      <Label for = "color"> Colore </ label>
    </ Div>
  </ Fieldset>
</ Form>
 
<Script>
$ ( "#radio") .buttonset ();
</ Script>
 
</ Corpo>
</ Html>

Visualizza demo