jQuery UI API - composant Button (Button Widget)

catégorie

Widgets (Widgets)

usage

Description: boutons et boutons themable.

Nouvelle version: 1.8

Composant Button (Button Widget) renforcer la fonctionnalité des éléments de formulaire standard, tels que les boutons (bouton), l'entrée (input), ancres (ancre), avec le vol stationnaire approprié (vol stationnaire) et activation de style (actif) sur le thème de la touche.

En plus des boutons de base, les boutons radio et cases à cocher (type d'entrée de radio et de case à cocher) peuvent également être convertis à un bouton. Tags associés (étiquette) est conçu styles de boutons, mettre à jour l'entrée sous-jacente a cliqué. Afin de fonctionner correctement, vous devez saisir un id attribut, et le point à l' étiquette (label) est for la propriété. Ne pas entrée sur l'étiquette (label) à l' intérieur, sinon il va causer des problèmes d'accessibilité .

Pour les boutons radio de paquets, Button fournit également d'un widget supplémentaire nommée Buttonset. Buttonset en sélectionnant un élément conteneur (y compris les boutons radio) et appeler .buttonset() à utiliser. Buttonset fournit également un regroupement visuel, donc quand il y a un bouton peut envisager de l'utiliser. Il sélectionne tous les descendants et leur application .button() . Vous pouvez activer et désactiver un ensemble de boutons, qui activer et désactiver tous les boutons inclus. Destruction Bouton rassemblement appelant de chaque bouton destroy la méthode. Pour les boutons radio et cases bouton groupement est recommandé d'utiliser avec la legend du fieldset pour fournir une étiquette de paquet accessible.

Lorsque vous utilisez un type de bouton, de soumettre ou de réinitialiser l'entrée, le soutien est limité à texte brut sans étiquettes icône.

theming

Composant Button (Bouton Widget) en utilisant framework jQuery UI CSS pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser les boutons de style spécifiées, vous pouvez utiliser le nom de la classe CSS suivante:

• ui-button : éléments DOM représentant le bouton. Cet élément sera basé sur le texte et les icônes pour ajouter l' une des options de classe suivantes: ui-button-text-only , ui-button-icon-only , ui-button-icons-only , ui-button-text-icons .
  • ui-button-icon-primary : les principaux éléments des icônes pour l' affichage. Seulement lorsque l'icône principale des icônes offrent des options lors de sa présentation.
  • ui-button-text : un conteneur autour du contenu du texte d'un bouton.
  • ui-button-icon-secondary : Les boutons d'affichage secondaire pour les icônes. Seulement quand l'icône secondaire icônes offrent des options lors de sa présentation.
• ui-buttonset : Buttonset récipient extérieur.

Fiez

• core UI (interface utilisateur de base)
• Bibliothèque de composants (Widget Factory)

informations complémentaires

• La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.

navigation rapide

$( ".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 ) {} );
	

Exemples

Un bouton jQuery UI simple (Button).

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> élément de bouton (Button Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Bouton> étiquette du bouton </ button>
 
<Script>
$ ( "Button") .button ();
</ Script>
 
</ Body>
</ Html>

Voir la démo

Un bouton simple ensemble jQuery UI (Buttonset).

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> élément de bouton (Button Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Form>
  <Fieldset>
    <Légende> projet jQuery favori </ legend>
    <Div id = "radio">
      <Input type = "radio" id = "grésiller" name = "projet">
      <Label for = "grésillement"> Sizzle </ label>
 
      <Input type = "radio" id = "QUnit" name = "projet" checked = "checked">
      <Label for = "QUnit"> QUnit </ label>
 
      <Input type = "radio" id = "color" name = "projet">
      <Label for = "color"> Couleur </ label>
    </ Div>
  </ Fieldset>
</ Form>
 
<Script>
$ ( "#radio") .buttonset ();
</ Script>
 
</ Body>
</ Html>

Voir la démo