jQueryのUIのインスタンス - ボタン（ボタン）

適切な使用ホバー（ホバー）及び活性化と（アクティブ）スタイルは、（例えば、ボタン、入力ボックス、アンカーなど）標準のフォーム要素の機能を強化するために、ボタンをテーマにすることができます。

ボタンコンポーネントの詳細については、APIドキュメントを参照してくださいボタン部材（ボタンウィジェットを）。

デフォルトの機能

ボタン要素を入力要素の種類とアンカーを提出する：マーカーの例は、ボタンのために使用することができます。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIボタン（ボタン） - デフォルトの機能</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "入力[タイプ=提出]、ボタン"）
      .button（）
      .click（関数（イベント）{
        event.preventDefault（）;
      }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<ボタン>ボタンの要素</ button>の
 
<入力タイプ=値= "送信ボタン"「送信」>
 
<a href="#">アンカーします</a>
 
 
</ BODY>
</ HTML>

チェックボックス

ボタン、チェックボックスによってトグルボタンのスタイルです。ボタンのテキストとしてボックスに関連付けられたラベル要素。

この例では、公共コンテナに呼び出すことによって.buttonset()実証3つの表示ボタンスタイルボックスとして、。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIボタン（ボタン） - チェックボックス</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#check」）.button（）;
    $（ "#format」）.buttonset（）;
  }）;
  </スクリプト>
  <スタイル>
  #format {マージントップ：2EM;}
  </スタイル>
</ HEAD>
<ボディ>
 
<入力タイプ= "チェックボックス" ID = "チェック"> <= "チェック"のラベル>スイッチ</ label>は
 
<DIVのID = "フォーマット">
  <入力タイプ= "チェックボックス" ID = "CHECK1"> <= "CHECK1」のラベル> B </ label>は
  <入力タイプ= "チェックボックス" ID = "CHECK2"> <= "CHECK2」のラベル>私は</ label>は
  <入力タイプ= "チェックボックス" ID = "check3"> <= "check3"のラベル> U </ label>は
</ DIV>
 
 
</ BODY>
</ HTML>

アイコン

テキストとアイコンボタンのさまざまな組み合わせでいくつかの

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIボタン（ボタン） - アイコン</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "ボタン：最初の"）.button（{
      アイコン：{
        プライマリー：「UI-アイコンロック」
      }、
      テキスト：偽
    }）。次に（）。ボタン（{
      アイコン：{
        プライマリー：「UI-アイコンロック」
      }
    }）。次に（）。ボタン（{
      アイコン：{
        プライマリー：「UI-アイコン・ギア」、
        二：「UI-アイコン・三角形1-S」
      }
    }）。次に（）。ボタン（{
      アイコン：{
        プライマリー：「UI-アイコン・ギア」、
        二：「UI-アイコン・三角形1-S」
      }、
      テキスト：偽
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
のみ</ button>の持つ<ボタン>アイコンボタン
<ボタン>左のアイコンボタン</ button>の
2つのアイコンと<ボタン>ボタン</ button>の
<ボタン> </ button>のないテキストのアイコンを持つ2つのボタンを持ちます
 
 
</ BODY>
</ HTML>

ラジオ

ボタンへの3つのラジオボタン。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIボタン（ボタン） - ラジオ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#radio」）.buttonset（）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<フォーム>
  <DIVのID = "ラジオ">
    <入力タイプ= "ラジオ"のid = "Radio1の"名前= "ラジオ"> < "Radio1の" =のラベルが> 1 </ label>を選択します
    <「radio2 "=のラベル> 2 </ label>を選択し、<入力タイプ="ラジオ "のid =" radio2 "名前="ラジオ "をチェック="にチェック ">
    <入力タイプ= "ラジオ"のid = "radio3"名前= "ラジオ"> < "radio3" =のラベルが> 3 </ label>を選択します
  </ DIV>
</フォーム>
 
 
</ BODY>
</ HTML>

スプリットボタン

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIボタン（ボタン） - スプリットボタン</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
    .ui-メニュー{位置：絶対;幅：100pxに;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ "#rerun」）
      .button（）
      .click（関数（）{
        警告（「最後のアクションの実行」を参照）。
      }）
      .next（）
        .button（{
          テキスト：偽、
          アイコン：{
            プライマリー：「UI-アイコン・三角形1-S」
          }
        }）
        .click（関数（）{
          VARメニュー= $（この）.parent（）。次の（）。ショー（）。位置（{
            私：「トップの左」、
            時：「左下」、
            の：この
          }）;
          $（ドキュメント）.one（「クリック」、関数（）{
            menu.hide（）。
          }）;
          falseを返します。
        }）
        .parent（）
          .buttonset（）
          .next（）
            .hide（）
            .menu（）。
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIV>
  <DIV>
    <ボタンID = "再放送">を実行し、最後のアクション</ button>の
    <ボタンID = "選択"> </ button>のアクションを選択
  </ DIV>
  <UL>
    <李> <a href="#">オープン...する</a>ます。</ li>
    <李> <a href="#">保存する</a>ます。</ li>
    <李> <a href="#">削除する</a>ます。</ li>
  </ UL>
</ DIV>
 
 
</ BODY>
</ HTML>

ツールバー

マルチメディアプレーヤーのツールバー。ルックベースのマーカー：一部のボタン要素、シャッフルボタン入力の種類のチェックボックスで、繰り返しのオプションは、無線入力の3種類があります。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIボタン（ボタン） - ツールバー</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  #toolbar {
    パディング：4PX。
    表示：インラインブロック;
  }
  / *サポート：IE7 * /
  * + htmlの#toolbar {
    表示：インライン;
  }
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ "#beginning」）.button（{
      テキスト：偽、
      アイコン：{
        プライマリー：「UI-アイコンシークスタート」
      }
    }）;
    $（ "#rewind」）.button（{
      テキスト：偽、
      アイコン：{
        プライマリー：「UI-アイコンシーク、前へ」
      }
    }）;
    $（ "#play」）.button（{
      テキスト：偽、
      アイコン：{
        プライマリー：「UI-アイコンプレイ "
      }
    }）
    .click（関数（）{
      varの各オプション。
      場合（$（この）は.text（）=== "遊び"）{
        オプション= {
          ラベル：「一時停止」、
          アイコン：{
            プライマリー：「UI-アイコンポーズ」
          }
        };
      }エルス{
        オプション= {
          ラベル：「再生」、
          アイコン：{
            プライマリー：「UI-アイコンプレイ "
          }
        };
      }
      $（この）.button（ "オプション"、オプション）。
    }）;
    $（ "#STOP」）.button（{
      テキスト：偽、
      アイコン：{
        プライマリー：「UI-アイコンストップ」
      }
    }）
    .click（関数（）{
      $（ "#play」）.button（"オプション "、{
        ラベル：「再生」、
        アイコン：{
          プライマリー：「UI-アイコンプレイ "
        }
      }）;
    }）;
    $（ "#forward」）.button（{
      テキスト：偽、
      アイコン：{
        プライマリー：「UI-アイコンシーク、次の "
      }
    }）;
    $（ "#END」）.button（{
      テキスト：偽、
      アイコン：{
        プライマリー：「UI-アイコンシークエンド」
      }
    }）;
    $（ "#shuffle」）.button（）;
    $（ "#repeat命令」）.buttonset（）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "ツールバー"クラス= "UIウィジェットヘッダUI-コーナー-すべて">
  <ボタンID = "始まり"> </ button>の始め
  <ボタンID = "巻き戻し"> </ button>の巻き戻し
  <ボタンのIDは= "遊び"> </ button>の再生
  <ボタンID = "停止">停止</ button>の
  <ボタンID = "前進">早送り</ button>の
  <ボタンのid = "終了">終了</ button>の
 
  <入力タイプ= "チェックボックス" ID = "シャッフル"> <ラベル= "シャッフル">シャッフル</ label>は
 
  <スパンのid = "繰り返し">
    <入力タイプ= "ラジオ"のid = "repeat0"名前= "繰り返し"にチェックを= "にチェック"> <= "repeat0"のラベル>はありません繰り返し</ label>は
    <入力タイプ= "ラジオ"のid = "repeat1"名前= "繰り返し"> <= "repeat1"のラベル>いったん</ label>は
    <入力タイプ= "ラジオ"のid = "repeatall"名前= "繰り返し"> <= "repeatall"のラベル>すべての</ label>は
  </スパン>
</ DIV>
 
 
</ BODY>
</ HTML>

前：jQueryのUIの例-自動（オートコンプリート）

次へ：jQueryのUIの例-日付ピッカー（日付ピッカー）

jQuery UI コース

jQuery UI テーマ

jQuery UI コンポーネントライブラリ

jQuery UI リファレンスマニュアル