Button | jQuery UI 1.10 日本語リファレンス

Button 1.8 追加

http://api.jqueryui.com/1.10/button/

各テーマ別のデザインとボタン機能を提供します。

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Button - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });
  });
  </script>
</head>
<body>

<button>button要素</button>

<input type="submit" value="submitボタン" />

<a href="#">anchor要素</a>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Button - Checkboxes</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#check" ).button();
    $( "#format" ).buttonset();
  });
  </script>
  <style>
  #format { margin-top: 2em; }
  </style>
</head>
<body>

<input type="checkbox" id="check" /><label for="check">Toggle</label>

<div id="format">
  <input type="checkbox" id="check1" /><label for="check1">B</label>
  <input type="checkbox" id="check2" /><label for="check2">I</label>
  <input type="checkbox" id="check3" /><label for="check3">U</label>
</div>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Button - Icons</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "button:first" ).button({
      icons: {
        primary: "ui-icon-locked"
      },
      text: false
    }).next().button({
      icons: {
        primary: "ui-icon-locked"
      }
    }).next().button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      }
    }).next().button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
  });
  </script>
</head>
<body>

<button>アイコンのみ</button>
<button>左アイコンとテキスト</button>
<button>2つのアイコンとテキスト</button>
<button>2つのアイコンのみ</button>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">選択1</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">選択2</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">選択3</label>
  </div>
</form>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Button - Split button</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <style>
    .ui-menu { position: absolute; width: 100px; }
  </style>
  <script>
  $(function() {
    $( "#rerun" )
      .button()
      .click(function() {
        alert( "最後の動作を実行" );
      })
      .next()
        .button({
          text: false,
          icons: {
            primary: "ui-icon-triangle-1-s"
          }
        })
        .click(function() {
          var menu = $( this ).parent().next().show().position({
            my: "left top",
            at: "left bottom",
            of: this
          });
          $( document ).one( "click", function() {
            menu.hide();
          });
          return false;
        })
        .parent()
          .buttonset()
          .next()
            .hide()
            .menu();
  });
  </script>
</head>
<body>

<div>
  <div>
    <button id="rerun">最後の動作を実行</button>
    <button id="select">動作を選択</button>
  </div>
  <ul>
    <li><a href="#">開く...</a></li>
    <li><a href="#">保存</a></li>
    <li><a href="#">削除</a></li>
  </ul>
</div>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Button - Toolbar</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <style>
  #toolbar {
    padding: 10px 4px;
  }
  </style>
  <script>
  $(function() {
    $( "#beginning" ).button({
      text: false,
      icons: {
        primary: "ui-icon-seek-start"
      }
    });
    $( "#rewind" ).button({
      text: false,
      icons: {
        primary: "ui-icon-seek-prev"
      }
    });
    $( "#play" ).button({
      text: false,
      icons: {
        primary: "ui-icon-play"
      }
    })
    .click(function() {
      var options;
      if ( $( this ).text() === "play" ) {
        options = {
          label: "pause",
          icons: {
            primary: "ui-icon-pause"
          }
        };
      } else {
        options = {
          label: "play",
          icons: {
            primary: "ui-icon-play"
          }
        };
      }
      $( this ).button( "option", options );
    });
    $( "#stop" ).button({
      text: false,
      icons: {
        primary: "ui-icon-stop"
      }
    })
    .click(function() {
      $( "#play" ).button( "option", {
        label: "play",
        icons: {
          primary: "ui-icon-play"
        }
      });
    });
    $( "#forward" ).button({
      text: false,
      icons: {
        primary: "ui-icon-seek-next"
      }
    });
    $( "#end" ).button({
      text: false,
      icons: {
        primary: "ui-icon-seek-end"
      }
    });
    $( "#shuffle" ).button();
    $( "#repeat" ).buttonset();
  });
  </script>
</head>
<body>

<span id="toolbar" class="ui-widget-header ui-corner-all">
  <button id="beginning">go to beginning</button>
  <button id="rewind">rewind</button>
  <button id="play">play</button>
  <button id="stop">stop</button>
  <button id="forward">fast forward</button>
  <button id="end">go to end</button>

  <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>

  <span id="repeat">
    <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
    <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
    <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
  </span>
</span>


</body>
</html>

inputとanchor等のボタン的な要素に、テーマ毎にhoverとactionを含むデザインを適用し、標準的な機能を強化します。

button要素だけでなく、ラジオボタンやチェックボックスもjQuery UIボタンに変換することができます。関連付けられたラベルはボタン上に表示されるようにスタイルが設定されます。ラベルとボタンにする要素の関係性を正しく示すため、inputのid属性を値を指定し、その値をlabelのfor属性に指定してください。また、アクセシビリティの問題があるため、label要素内にinput要素を入れないでください。

ラジオボタンをグループ化するために、ボタンはボタンセット(Buttonset)と呼ばれるウィジットも提供しています。ボタンセットはコンテナ要素(ラジオボタンを含める)の選択に使用され、.buttonset()で呼び出されます。また視覚的なグループ化の機能も提供するので、ボタンのグループ化をする際には常に使用すべきです。

これは全ての子孫要素を選択して、.button()メソッドを適用します。ボタンセットを有効化・無効化を行うことが可能で、含まれるボタンが一括で有効化・無効化されます。また、ボタンセットのdestroyでは、それぞれのボタンのdestroy()メソッドが呼ばれます。 input type="button"または、"submit"、"reset"を使用している場合、サポートはアイコン無しのプレーンテキストに制限されます。

<button>ボタン</button>

<script>
$( "button" ).button();
</script>

依存関係

UI Core(jquery.ui.core.js)
Widget Factory

オプション	説明
disabled	型：`Boolean` 初期値：`false` trueにすると、ボタンを無効化します。
icons	型：`Object` 初期値：`{ primary: null, secondary: null }` テキストと一緒に、またはテキスト無しでボタン上にアイコンを表示します。(テキストの詳細はtextオプション参照) デフォルトでは、primaryに指定したアイコンはテキストの左側に、secondaryは右側に表示されます。ポジションはCSSによって制御され、各プロパティには"ui-icon-gear"などのclass名を指定してください。 1つだけ指定したい場合は、`icons: { primary: "ui-icon-locked" }`のように指定し、 2つ指定したい場合は、`icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }.` のように指定します。アイコン一覧 `$(".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"});`
label	型：`String` 初期値：`null` ボタンに表示するテキストを指定します。もし、指定されなかった(nullの)場合、対象要素がinputのsubmit、resetなら、valueの値が、ラジオボタンやチェックボックスであれば関連付けられたラベルの値が適用されます。
text	型：`Boolean` 初期値：`true` ラベル表示をするか否かを指定します。もし、falseが指定された場合、ラベルのテキストは表示されませんがiconsオプションの指定が有効でなければいけません。そうでなければ、このtextの指定は無視されます。

メソッド	説明
destroy()	ボタンの機能を完全に削除します。
disable()	ボタンを無効化します。
enable()	ボタンを有効にします。
option( optionName )	戻り値：`Object` optionNameに指定したオプションの現在の値を取得します。 optionName 型：`String` 取得したいオプションの名前を指定します。
option()	戻り値：`PlainObject` オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName, value )	引数のoptionNameのオプションに値を設定します。 optionName 型：`String` 設定したいオプションの名前を指定します。 value 型：`Object` 設定したい値を指定します。
option( options )	オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。 option 型：`Object` 設定したいオプションのキーと名前のペアを指定します。
refresh()	ボタンの見た目の部分をリフレッシュします。プログラム処理で直接対照の要素のチェック状態などを変えた際に有用です。
widget()	型：`jQuery` ボタンの見た目に関する部分を含めた要素を、jQueryオブジェクトとして返します。

イベント説明

create( event, ui )

イベント	説明
create( event, ui )	型：`buttoncreate` ボタンが生成された際にトリガされます。

型：buttoncreate

ボタンが生成された際にトリガされます。