jQueryのUIのAPI - Buttonコンポーネント（ボタンウィジェット）
カテゴリ
使用法
説明：themableボタンとボタン。
新バージョン：1.8
ボタンのテーマに適切なホバー（ホバリング）および活性化（アクティブ）スタイルを持つButtonコンポーネント（ボタンウィジェット）、ボタン（ボタン）などの標準的なフォーム要素の機能を強化し、入力（入力）、アンカー（アンカー）、。
基本的なボタン、ラジオボタン、チェックボックスに加えて（入力型ラジオ、チェックボックス）は、ボタンに変換することができます。 関連したタグ（ラベル）基本となる入力がクリック更新し、設計されたボタンのスタイルです。 正しく動作するためには、入力する必要idあるラベル（ラベル）に属性、およびポイントをforプロパティです。 それ以外の場合はされます、内側のラベル（ラベル）に入力しないでください、アクセシビリティの問題を引き起こします 。
パケットラジオボタンの場合、ボタンもButtonsetという名前の追加のウィジェットを提供します。 （ラジオボタンを含む）コンテナ要素を選択することにより、Buttonsetとコール.buttonset()使用すること。 Buttonsetはまた、視覚的なグループ化を提供し、そのようにボタンがある場合、それを利用することを考えてください。 これは、すべての子孫とそのアプリケーションを選択し.button() あなたが含まれているすべてのボタンを有効または無効にしますボタンのセットを、有効または無効にすることができます。 各ボタンの呼び出し破壊ボタンラリーdestroy方法を。 ラジオボタンやチェックボックスの場合は、ボタンのグループ化はして使用することが推奨されるlegendのfieldsetアクセス可能なパケットラベルを提供します。
ボタンの種類を使用する場合は、送信するか、リセット入力、サポートは、アイコンラベルのないプレーンテキストに限定されています。
テーマ
使用して、Buttonコンポーネント（ボタンウィジェット） のjQuery UI CSSフレームワークを 、そのスタイルのルックアンドフィールを定義します。 あなたが指定したスタイルのボタンを使用する必要がある場合は、以下のCSSクラス名を使用することができます。
-
ui-button：ボタンを表すDOM要素。 この要素は、に基づいて行われますテキストとアイコン以下のクラスのいずれかのオプションを追加する：ui-button-text-only、ui-button-icon-only、ui-button-icons-only、ui-button-text-icons。 -
ui-buttonsetButtonset外容器：。
頼ります
追加情報
- 一部は、いくつかの機能のCSSを必要とし、それ以外の場合は動作しません。 カスタムテーマを作成する場合は、出発点として、ウィジェット指定されたCSSファイルを使用します。
クイックナビゲーション
| 选项 | 方法 | 事件 |
|---|---|---|
| 选项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| disabled | Boolean | 如果设置为 true ，则禁用该 button。代码实例： 初始化带有指定
$( ".selector" ).button({ disabled: true });
在初始化后，获取或设置 // getter var disabled = $( ".selector" ).button( "option", "disabled" ); // setter $( ".selector" ).button( "option", "disabled", true ); |
false |
| icons | Object | 要显示的图标，包括带有文本的图标和不带有文本的图标（查看 text 选项）。默认情况下 ，主图标显示在标签文本的左边，副图标显示在右边。显示位置可通过 CSS 进行控制。 代码实例： 初始化带有指定
$( ".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" } );
|
{ primary: null, secondary: null } |
| label | String | 要显示在按钮中的文本。当未指定时（ null ），则使用元素的 HTML 内容，或者如果元素是一个 submit 或 reset 类型的 input 元素，则使用它的 value 属性，或者如果元素是一个 radio 或 checkbox 类型的 input 元素，则使用相关的 label 元素的 HTML 内容。代码实例： 初始化带有指定
$( ".selector" ).button({ label: "custom label" });
在初始化后，获取或设置 // getter var label = $( ".selector" ).button( "option", "label" ); // setter $( ".selector" ).button( "option", "label", "custom label" ); |
null |
| text | Boolean | 是否显示标签。当设置为 false 时，不显示文本，但是此时必须启用 icons 选项，否则 text 选项将被忽略。 代码实例： 初始化带有指定
$( ".selector" ).button({ text: false });
在初始化后，获取或设置 // getter var text = $( ".selector" ).button( "option", "text" ); // setter $( ".selector" ).button( "option", "text", false ); |
true |
| 方法 | 返回 | 描述 |
|---|---|---|
| destroy() | jQuery (plugin only) | 完全移除 button 功能。这会把元素返回到它的预初始化状态。
代码实例： 调用 destroy 方法： $( ".selector" ).button( "destroy" ); |
| disable() | jQuery (plugin only) | 禁用 button。
代码实例： 调用 disable 方法： $( ".selector" ).button( "disable" ); |
| enable() | jQuery (plugin only) | 启用 button。
代码实例： 调用 enable 方法： $( ".selector" ).button( "enable" ); |
| option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例： 调用该方法： var isDisabled = $( ".selector" ).button( "option", "disabled" ); |
| option() | PlainObject | 获取一个包含键/值对的对象，键/值对表示当前 button 选项哈希。
代码实例： 调用该方法： var options = $( ".selector" ).button( "option" ); |
| option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 button 选项的值。
代码实例： 调用该方法： $( ".selector" ).button( "option", "disabled", true ); |
| option( options ) | jQuery (plugin only) | 为 button 设置一个或多个选项。
代码实例： 调用该方法：
$( ".selector" ).button( "option", { disabled: true } );
|
| refresh() | jQuery (plugin only) | 刷新按钮的视觉状态。用于在以编程方式改变原生元素的选中状态或禁用状态后更新按钮状态。
代码实例： 调用 refresh 方法： $( ".selector" ).button( "refresh" ); |
| widget() | jQuery | 返回一个包含 button 的 jQuery 对象。
代码实例： 调用 widget 方法： var widget = $( ".selector" ).button( "widget" ); |
| 事件 | 类型 | 描述 |
|---|---|---|
| create( event, ui ) | buttoncreate | 当创建按钮 button 时触发。
注意： 代码实例： 初始化带有指定 create 回调的 button：
$( ".selector" ).button({
create: function( event, ui ) {}
});
绑定一个事件监听器到 buttoncreate 事件：
$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );
|
例
実施例1：シンプルなjQueryのUIボタン（ボタン）。
<！DOCTYPE HTML> <HTML LANG = "EN"> <ヘッド> <メタ文字セット= "UTF-8"> <タイトル>ボタン部材（ボタンウィジェット）デモ</タイトル> <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト> <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト> </ HEAD> <ボディ> <ボタン>ボタンのラベル</ button>の <スクリプト> $（ "ボタン"）.button（）; </スクリプト> </ BODY> </ HTML>例2：
シンプルなjQueryのUIボタンセット（Buttonset）。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>ボタン部材（ボタンウィジェット）デモ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
<フォーム>
<フィールドセット>
<伝説>好きなのjQueryプロジェクト</伝説>
<DIVのID = "ラジオ">
<入力タイプ= "ラジオ"のid = "ジュージューという音"名前= "プロジェクト">
シズル</ label>は、<= "ジュージューという音"のラベルは>
<入力タイプ= "ラジオ"のid = "qunit"名前= "プロジェクトは" = "にチェック"をチェック>
<= "qunit"のラベル> QUnit </ label>は
<入力タイプ= "ラジオ"のid = "色"名前= "プロジェクト">
カラー</ label>は、<= "色"のラベル>
</ DIV>
</フィールドセット>
</フォーム>
<スクリプト>
$（ "#radio」）.buttonset（）;
</スクリプト>
</ BODY>
</ HTML>