jQuery UI API - Button-Widget

Kategorie

小部件

Nutzung

Beschreibung:Anpassbare Buttons und Button-Sets.

添加版本：1.8

Das Button-Widget erweitert die Funktionalität von Standard-Formularelementen wie Buttons, Eingabefeldern und Ankern, um sie mit passenden Hover- und Aktiv-Stilen zu versehen.

Zusätzlich zu einfachen Buttons können auch Radio-Buttons und Checkboxen (input types radio und checkbox) in Buttons umgewandelt werden. Das zugehörige Label wird als Button gestaltet, und ein Klick darauf aktualisiert das zugrunde liegende Eingabefeld. Damit dies ordnungsgemäß funktioniert, benötigt das Eingabefeld einidAttribut, und es muss auf das des Labels verweisenforAttribut. Platzieren Sie das input nicht innerhalb des Labels, andernfalls wird esBarrierefreiheitsprobleme verursachen。

Um Radio-Buttons zu gruppieren, bietet Button außerdem ein zusätzliches Widget namens Buttonset. Buttonset wird verwendet, indem man ein Container-Element (das die Radio-Buttons enthält) auswählt und aufruft.buttonset(). Buttonset bietet außerdem eine visuelle Gruppierung, sodass es in Betracht gezogen werden kann, wann immer eine Gruppe von Buttons vorhanden ist. Es wählt alle Nachfahren aus und wendet.button(). Sie können ein Buttonset aktivieren und deaktivieren, wodurch alle enthaltenen Buttons aktiviert und deaktiviert werden. Das Zerstören eines Buttonsets ruft bei jedem Button dessendestroyMethode auf. Für gruppierte Radio-Buttons und Checkbox-Buttons wird empfohlen, einlegendvonfieldsetum eine barrierefreie Gruppenbeschriftung bereitzustellen.

Wenn ein input vom Typ button, submit oder reset verwendet wird, werden nur reine Textbeschriftungen ohne Icons unterstützt.

主题

Das Button-Widget verwendet dasjQuery UI CSS Framework, um das Styling für sein Erscheinungsbild festzulegen. Wenn Sie buttonspezifische Stile verwenden müssen, können Sie die folgenden CSS-Klassennamen verwenden:

• ui-button: Repräsentiert das DOM-Element des Buttons. Diesem Element wird eine der folgenden Klassen zugewiesen, basierend auf dertext- undicons-Option:ui-button-text-only、ui-button-icon-only、ui-button-icons-only、ui-button-text-icons。
  • ui-button-icon-primary: Das Element, das verwendet wird, um das primäre Icon des Buttons anzuzeigen. Es wird nur gerendert, wenn das primäre Icon in dericons-Option bereitgestellt wird.
  • ui-button-text: Der Container, der den Textinhalt des Buttons umgibt.
  • ui-button-icon-secondary: Wird verwendet, um das sekundäre Symbol der Schaltfläche anzuzeigen. Es wird nur gerendert, wenn das sekundäre Symbol in dericonsOption angegeben ist.
• ui-buttonset: Der äußere Container des Buttonset.

Abhängigkeiten

• UI 核心
• Widget-Factory

Zusätzliche Hinweise

• Dieses Widget benötigt etwas funktionales CSS, andernfalls funktioniert es nicht. Wenn Sie ein benutzerdefiniertes Theme erstellen, verwenden Sie die widgetspezifische CSS-Datei als Ausgangspunkt.

Schnellnavigation

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

Beispiele

Ein einfacher jQuery UI Button.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>按钮部件（Button Widget）演示</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>
 
<button>按钮标签</button>
 
<script>
$( "button" ).button();
</script>
 
</body>
</html>

Ein einfaches jQuery UI Buttonset.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>按钮部件（Button Widget）演示</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>
    <legend>最喜欢的 jQuery 项目</legend>
    <div id="radio">
      <input type="radio" id="sizzle" name="project">
      <label for="sizzle">Sizzle</label>
 
      <input type="radio" id="qunit" name="project" checked="checked">
      <label for="qunit">QUnit</label>
 
      <input type="radio" id="color" name="project">
      <label for="color">Color</label>
    </div>
  </fieldset>
</form>
 
<script>
$( "#radio" ).buttonset();
</script>
 
</body>
</html>