Bouton


Améliorez la fonctionnalité des éléments de formulaire standard (tels que les boutons, les champs de saisie, les ancres) avec des boutons thématiques avec des styles de survol et actifs appropriés.

Pour plus de détails sur le widget bouton, veuillez consulter la documentation de l'API Button Widget.

Fonctionnalité par défaut

Instances de balisage disponibles pour les boutons : un élément bouton, un élément d'entrée de type submit et une ancre.

Instance

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮（Button） - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/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="一个提交按钮">
 
<a href="#">一个锚</a>
 
 
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Box à cocher

Affichez la case à cocher sous la forme d'un style de bouton à bascule via le composant bouton. L'élément label associé à la case à cocher sert de texte au bouton.

Cet exemple montre trois cases à cocher affichées sous forme de styles de bouton en appelant .buttonset() sur un conteneur commun.

Instance

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮（Button） - 复选框</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/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">切换</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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Icône

Quelques boutons avec diverses combinaisons de texte et d'icônes

Instances

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮（Button） - 图标</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/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>带有两个图标的按钮</button>
<button>带有两个图标且不带文本的按钮</button>
 
 
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Unique Sélectionnez les trois boutons radio

pour les convertir en un ensemble de boutons.

Instance

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮（Button） - 单选</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Bouton partagé

Instance

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮（Button） - 分割按钮</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
    .ui-menu { position: absolute; width: 100px; }
  </style>
  <script>
  $(function() {
    $( "#rerun" )
      .button()
      .click(function() {
        alert( "Running the last action" );
      })
      .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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Barre d'outils

Une barre d'outils pour un multimédia joueur. Regardez le balisage de base : certains éléments de bouton, le bouton Shuffle est une entrée de type case à cocher et l'option Répéter est trois entrées de type radio.

Instance

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮（Button） - 工具栏</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #toolbar {
    padding: 4px;
    display: inline-block;
  }
  /* support: IE7 */
  *+html #toolbar {
    display: inline;
  }
  </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>
 
<div id="toolbar" class="ui-widget-header ui-corner-all">
  <button id="beginning">开头</button>
  <button id="rewind">快退</button>
  <button id="play">播放</button>
  <button id="stop">停止</button>
  <button id="forward">快进</button>
  <button id="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>
</div>
 
 
</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne