JqueryUI-ボタン

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

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

構文

ザ・ button() メソッドは2つの形式で使用できます-

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

  • $（selector、context）.button（ "action"、params）メソッド

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

ボタン（オプション）メソッドは、HTML要素がボタンとして扱われるべきであることを宣言する。オプションのパラメータは、ボタンの動作と外観を指定するオブジェクトです。

構文

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

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

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

次の表に、この方法で使用できるさまざまなオプションを示します。

シニア番号 オプションと説明
1 無効

このオプションは、ボタンがtrueに設定されていることを無効にします。デフォルトでは、その値はfalse。

Option - disabled

このオプションは、ボタンがtrueに設定されていることを無効にします。デフォルトでは、その値はfalse。

Syntax

$( ".selector" ).button({ disabled: true });
2 アイコン

このオプションは、1つまたは2つのアイコンをボタンに表示することを指定します。左側にプライマリアイコン、右側にセカンダリアイコンです。プライマリアイコンはオブジェクトのプライマリプロパティによって識別され、セカンダリアイコンはセカンダリプロパティによって識別されます。デフォルトでは、その値はprimary: null, secondary: null。

Option - icons

このオプションは、1つまたは2つのアイコンをボタンに表示することを指定します。左側にプライマリアイコン、右側にセカンダリアイコンです。プライマリアイコンはオブジェクトのプライマリプロパティによって識別され、セカンダリアイコンはセカンダリプロパティによって識別されます。デフォルトでは、その値はprimary: null, secondary: null。

Syntax

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

このオプションは、自然なラベルを上書きするボタンに表示するテキストを指定します。省略した場合、要素の自然なラベルが表示されます。ラジオボタンとチェックボックスの場合、自然なラベルはコントロールに関連付けられた<label>要素です。デフォルトでは、その値はnull。

Option - label

このオプションは、自然なラベルを上書きするボタンに表示するテキストを指定します。省略した場合、要素の自然なラベルが表示されます。ラジオボタンとチェックボックスの場合、自然なラベルはコントロールに関連付けられた<label>要素です。デフォルトでは、その値はnull。

Syntax

$( ".selector" ).button({ label: "custom label" });
4 テキスト

このオプションは、ボタンにテキストを表示するかどうかを指定します。falseとして指定されている場合、iconsオプションで少なくとも1つのアイコンが指定されている場合に限り、テキストは抑制されます。デフォルトでは、その値はtrue。

Option - text

このオプションは、ボタンにテキストを表示するかどうかを指定します。falseとして指定されている場合、iconsオプションで少なくとも1つのアイコンが指定されている場合に限り、テキストは抑制されます。デフォルトでは、その値はtrue。

Syntax

$( ".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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

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

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

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

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

ここでは、アイコンのみのボタン、2つのアイコンのあるボタン、および無効になっているボタンを確認できます。

$（selector、context）.button（ "action"、params）メソッド

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

構文

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

次の表に、この方法で使用できるさまざまなアクションを示します。

シニア番号 アクションと説明
1 破壊

このアクションにより、要素のボタン機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を受け入れません。

Action - destroy

このアクションにより、要素のボタン機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を受け入れません。

Syntax

$( ".selector" ).button("destroy");
2 無効にする

このアクションは、要素のボタン機能を無効にします。このメソッドは引数を受け入れません。

Action - disable

このアクションは、要素のボタン機能を無効にします。このメソッドは引数を受け入れません。

Syntax

$( ".selector" ).button("disable");
3 有効にする

このアクションにより、要素のボタン機能が有効になります。このメソッドは引数を受け入れません。

Action - enable

このアクションにより、要素のボタン機能が有効になります。このメソッドは引数を受け入れません。

Syntax

$( ".selector" ).button("enable");
4 option（optionName）

このアクションは、optionNameで指定されたオプションの値を取得します。ここで、optionNameは文字列です。

Action - option( optionName )

このアクションは、optionNameで指定されたオプションの値を取得します。ここで、optionNameは文字列です。

Syntax

var isDisabled = $( ".selector" ).button( "option", "disabled" );
5 オプション

このアクションは、現在のボタンオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。

Action - option

このアクションは、現在のボタンオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。

Syntax

$( ".selector" ).button("option");
6 option（optionName、value）

このアクションは、指定されたoptionNameに関連付けられたボタンオプションの値を設定します。

Action - option( optionName, value )

このアクションは、指定されたoptionNameに関連付けられたボタンオプションの値を設定します。ここで、optionNameは設定するオプションの名前であり、valueはオプションに設定する値です。

Syntax

$( ".selector" ).button( "option", "disabled", true );
7 option（options）

このアクションは、ボタンの1つ以上のオプションを設定します。ここで、optionsは、設定するオプションと値のペアのマップです。

Action - option( options )

このアクションは、ボタンの1つ以上のオプションを設定します。ここで、optionsは、設定するオプションと値のペアのマップです。

Syntax

$( ".selector" ).button( "option", { disabled: true } );
8 リフレッシュ

このアクションにより、ボタンの表示が更新されます。これは、ボタンがプログラムによって処理され、表示が必ずしも内部状態に対応していない場合に役立ちます。このメソッドは引数を受け入れません。

Action - refresh

このアクションにより、ボタンの表示が更新されます。これは、ボタンがプログラムによって処理され、表示が必ずしも内部状態に対応していない場合に役立ちます。このメソッドは引数を受け入れません。

Syntax

$( ".selector" ).button("refresh");
9 ウィジェット

このアクションは、button要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。

Action - widget

このアクションは、button要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。

Syntax

$( ".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.htm javascriptをサポートする標準のブラウザで開くと、次の出力が表示されます-

ボタンのイベント管理

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

シニア番号 イベントの方法と説明
1 create（event、ui）

このイベントは、ボタンが作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - create(event, ui)

このイベントは、ボタン要素が作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Syntax

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

例

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

<!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").html ($("p#result")
                  .html () + "<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.htm javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved