JqueryUI-ボタン

jQueryUIはbutton（）メソッドを提供し、HTML要素（ボタン、入力、アンカーなど）をテーマ対応ボタンに変換し、マウスの動きを自動的に管理し、すべてjQuery UIによって透過的に管理します。

ラジオボタンをグループ化するために、Buttonは_Buttonset_と呼ばれる追加のウィジェットも提供します。 Buttonset_は、コンテナ要素（ラジオボタンを含む）を選択し、。buttonset（）_を呼び出すことで使用されます。

構文

button（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_button＃button_options [$（selector、context）.button（options）]メソッド
link：/jqueryui/jqueryui_button＃button_methods [$（selector、context）.button（ "action"、params）]メソッド

[button_options]#

$（セレクター、コンテキスト）.button（オプション）メソッド

_button（options）_メソッドは、HTML要素をボタンとして扱うことを宣言します。 _options_パラメーターは、ボタンの動作と外観を指定するオブジェクトです。

構文

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

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

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

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No.	Option & Description
1	disabled このオプションは、ボタンが_true_に設定されていることを無効にします。デフォルトでは、その値は false です。オプション-無効このオプションは、ボタンが_true_に設定されていることを無効にします。デフォルトでは、その値は false です。構文 `$( ".selector" ).button({ disabled: true });`
2	icons このオプションは、1つまたは2つのアイコンを_buttonに表示することを指定します。左側のプライマリアイコン、右側のセカンダリアイコン。プライマリアイコンはオブジェクトの_primary_プロパティによって識別され、_secondary_アイコンはセカンダリプロパティによって識別されます。デフォルトでは、その値は primary：null、secondary：null です。オプション-アイコンこのオプションは、1つまたは2つのアイコンを_buttonに表示することを指定します。左側のプライマリアイコン、右側のセカンダリアイコン。プライマリアイコンはオブジェクトの_primary_プロパティによって識別され、_secondary_アイコンはセカンダリプロパティによって識別されます。デフォルトでは、その値は primary：null、secondary：null です。構文 `$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });`
3	label このオプションは、自然ラベルを上書きするボタンに表示するテキストを指定します。省略した場合、要素の自然なラベルが表示されます。ラジオボタンとチェックボックスの場合、自然なラベルはコントロールに関連付けられた<label>要素です。デフォルトでは、その値は null です。オプション-ラベルこのオプションは、自然ラベルを上書きするボタンに表示するテキストを指定します。省略した場合、要素の自然なラベルが表示されます。ラジオボタンとチェックボックスの場合、自然なラベルはコントロールに関連付けられた<label>要素です。デフォルトでは、その値は null です。構文 `$( ".selector" ).button({ label: "custom label" });`
4	text このオプションは、テキストをボタンに表示するかどうかを指定します。 _false_として指定されている場合、アイコンオプションで少なくとも1つのアイコンが指定されている場合にのみテキストが抑制されます。デフォルトでは、その値は true です。オプション-テキストこのオプションは、テキストをボタンに表示するかどうかを指定します。 _false_として指定されている場合、アイコンオプションで少なくとも1つのアイコンが指定されている場合にのみテキストが抑制されます。デフォルトでは、その値は true です。構文 `$( ".selector" ).button({ text: false });`

デフォルトの機能

次の例は、* button（）*メソッドにパラメーターを渡さないボタンウィジェット機能の簡単な例を示しています。

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

上記のコードをHTMLファイル buttonexample に保存し、JavaScriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

この例は、ボタンに使用できるマークアップ、ボタン要素、送信タイプの入力、アンカーを示しています。

アイコン、テキスト、および無効の使用

次の例は、JqueryUIのボタン関数での2つのオプション icons 、 text および disabled の使用法を示しています。

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

上記のコードをHTMLファイル buttonexample に保存し、JavaScriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

ここでは、アイコンのみのボタン、2つのアイコンのボタン、および無効なボタンを見ることができます。

[button_methods]#

$（セレクター、コンテキスト）.button（ "action"、params）メソッド

_button（ "action"、params）_メソッドは、ボタンを無効にするなど、ボタンに対してアクションを実行できます。アクションは、最初の引数で文字列として指定されます（たとえば、ボタンを無効にするには「無効」）。次の表で、渡すことができるアクションを確認してください。

構文

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

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).button("destroy");
$( ".selector" ).button("disable");
$( ".selector" ).button("enable");
var isDisabled = $( ".selector" ).button( "option", "disabled" );
$( ".selector" ).button("option");
$( ".selector" ).button( "option", "disabled", true );
$( ".selector" ).button( "option", { disabled: true } );
$( ".selector" ).button("refresh");
$( ".selector" ).button("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_destroy（）_および_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>

上記のコードをHTMLファイル buttonexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されます-

ボタンのイベント管理

前のセクションで見たボタン（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

Sr.No.	Event Method & Description
1	create(event, ui) このイベントは、ボタンが作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-create（event、ui）このイベントは、ボタン要素が作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).button({ create: function( event, ui ) {} });`

例

次の例は、ボタンウィジェット機能のイベントメソッドの使用方法を示しています。この例は、_create_イベントの使用方法を示しています。

<!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")l ($("p#result")
                  l () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>

   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

上記のコードをHTMLファイル buttonexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

Sr.No.	Option & Description
1	disabled このオプションは、ボタンが_true_に設定されていることを無効にします。デフォルトでは、その値は false です。オプション-無効このオプションは、ボタンが_true_に設定されていることを無効にします。デフォルトでは、その値は false です。構文 `$( ".selector" ).button({ disabled: true });`
2	icons このオプションは、1つまたは2つのアイコンを_buttonに表示することを指定します。左側のプライマリアイコン、右側のセカンダリアイコン。プライマリアイコンはオブジェクトの_primary_プロパティによって識別され、_secondary_アイコンはセカンダリプロパティによって識別されます。デフォルトでは、その値は primary：null、secondary：null です。オプション-アイコンこのオプションは、1つまたは2つのアイコンを_buttonに表示することを指定します。左側のプライマリアイコン、右側のセカンダリアイコン。プライマリアイコンはオブジェクトの_primary_プロパティによって識別され、_secondary_アイコンはセカンダリプロパティによって識別されます。デフォルトでは、その値は primary：null、secondary：null です。構文 `$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });`
3	label このオプションは、自然ラベルを上書きするボタンに表示するテキストを指定します。省略した場合、要素の自然なラベルが表示されます。ラジオボタンとチェックボックスの場合、自然なラベルはコントロールに関連付けられた<label>要素です。デフォルトでは、その値は null です。オプション-ラベルこのオプションは、自然ラベルを上書きするボタンに表示するテキストを指定します。省略した場合、要素の自然なラベルが表示されます。ラジオボタンとチェックボックスの場合、自然なラベルはコントロールに関連付けられた<label>要素です。デフォルトでは、その値は null です。構文 `$( ".selector" ).button({ label: "custom label" });`
4	text このオプションは、テキストをボタンに表示するかどうかを指定します。 _false_として指定されている場合、アイコンオプションで少なくとも1つのアイコンが指定されている場合にのみテキストが抑制されます。デフォルトでは、その値は true です。オプション-テキストこのオプションは、テキストをボタンに表示するかどうかを指定します。 _false_として指定されている場合、アイコンオプションで少なくとも1つのアイコンが指定されている場合にのみテキストが抑制されます。デフォルトでは、その値は true です。構文 `$( ".selector" ).button({ text: false });`

Sr.No.	Action & Description
1	destroy このアクションにより、要素のボタン機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-破壊このアクションにより、要素のボタン機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$( ".selector" ).button("destroy");`
2	disable このアクションは、要素のボタン機能を無効にします。このメソッドは引数を取りません。アクション-無効このアクションは、要素のボタン機能を無効にします。このメソッドは引数を取りません。構文 `$( ".selector" ).button("disable");`
3	enable このアクションにより、要素のボタン機能が有効になります。このメソッドは引数を取りません。アクション-有効このアクションにより、要素のボタン機能が有効になります。このメソッドは引数を取りません。構文 `$( ".selector" ).button("enable");`
4	option( optionName ) このアクションは、_optionName_で指定されたオプションの値を取得します。ここで、_optionName_は文字列です。アクション-option（optionName）このアクションは、_optionName_で指定されたオプションの値を取得します。ここで、_optionName_は文字列です。構文 `var isDisabled = $( ".selector" ).button( "option", "disabled" );`
5	option このアクションは、現在のボタンオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-オプションこのアクションは、現在のボタンオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `$( ".selector" ).button("option");`
6	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたボタンオプションの値を設定します。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたボタンオプションの値を設定します。ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).button( "option", "disabled", true );`
7	option( options ) このアクションは、ボタンの1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）このアクションは、ボタンの1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).button( "option", { disabled: true } );`
8	refresh このアクションにより、ボタンの表示が更新されます。これは、ボタンがプログラムによって処理され、ディスプレイが必ずしも内部状態に対応していない場合に役立ちます。このメソッドは引数を取りません。アクション-更新このアクションにより、ボタンの表示が更新されます。これは、ボタンがプログラムによって処理され、ディスプレイが必ずしも内部状態に対応していない場合に役立ちます。このメソッドは引数を取りません。構文 `$( ".selector" ).button("refresh");`
9	widget このアクションは、ボタン要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェットこのアクションは、ボタン要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `$( ".selector" ).button("widget");`

Jqueryui-button

目次