首页 教程 JavaScript 开发教程 jQuery UI 技术教程 jQuery UI 实例 – 按钮(Button)
jQuery UI 技术教程
1 . jQuery UI 教程2 . jQuery UI 简介3 . jQuery UI 下载4 . jQuery UI 使用5 . jQuery UI 定制6 . jQuery UI 工作原理7 . jQuery UI 主题8 . jQuery UI ThemeRoller9 . jQuery UI CSS 框架 API10 . jQuery UI 设计主题11 . jQuery UI 部件库12 . jQuery UI 通过部件库扩展小部件13 . jQuery UI 小部件方法调用14 . jQuery UI 为什么使用部件库15 . jQuery UI 如何使用部件库16 . jQuery UI API 文档17 . jQuery UI API 类别 – 特效18 . jQuery UI API 类别 – 特效核心19 . jQuery UI API 类别 – 交互20 . jQuery UI API 类别 – 方法重载21 . jQuery UI API 类别 – 方法22 . jQuery UI API 类别 – 选择器23 . jQuery UI API 类别 – 主题24 . jQuery UI API 类别 – UI 核心25 . jQuery UI API 类别 – 实用工具26 . jQuery UI API 类别 – 小部件27 . jQuery UI 实例28 . jQuery UI 实例 – 拖动(Draggable)29 . jQuery UI 实例 – 放置(Droppable)30 . jQuery UI 实例 – 缩放(Resizable)31 . jQuery UI 实例 – 选择(Selectable)32 . jQuery UI 实例 – 排序(Sortable)33 . jQuery UI 实例 – 折叠面板(Accordion)34 . jQuery UI 实例 – 自动完成(Autocomplete)35 . jQuery UI 实例 – 按钮(Button)36 . jQuery UI 实例 – 日期选择器(Datepicker)37 . jQuery UI 实例 – 对话框(Dialog)38 . jQuery UI 实例 – 菜单(Menu)39 . jQuery UI 实例 – 进度条(Progressbar)40 . jQuery UI 实例 – 滑块(Slider)41 . jQuery UI 实例 – 旋转器(Spinner)42 . jQuery UI 实例 – 标签页(Tabs)43 . jQuery UI 实例 – 工具提示框(Tooltip)44 . jQuery UI 实例 – 特效(Effect)45 . jQuery UI 实例 – 显示(Show)46 . jQuery UI 实例 – 隐藏(Hide)47 . jQuery UI 实例 – 切换(Toggle)48 . jQuery UI 实例 – 添加 Class(Add Class)49 . jQuery UI 实例 – 移除 Class(Remove Class)50 . jQuery UI 实例 – 切换 Class(Toggle Class)51 . jQuery UI 实例 – 转换 Class(Switch Class)52 . jQuery UI 实例 – 颜色动画(Color Animation)53 . jQuery UI 实例 – 定位(Position)54 . jQuery UI 实例 – 部件库(Widget Factory)

jQuery UI 实例 – 按钮(Button)

jQuery UI 实例 - 按钮(Button)

用带有适当的悬停(hover)和激活(active)的样式的可主题化按钮来加强标准表单元素(比如按钮、输入框、锚)的功能。

如需了解更多有关 button 部件的细节,请查看 API 文档 按钮部件(Button Widget)

默认功能

可用于按钮的标记实例:一个 button 元素,一个类型为 submit 的 input 元素和一个锚。

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

复选框

通过 button 部件把复选框显示为切换按钮样式。与复选框相关的 label 元素作为按钮文本。

本实例通过在一个公共的容器上调用 .buttonset(),演示了三个显示为按钮样式的复选框。

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

图标

一些带有文本和图标的各种组合的按钮

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

单选

三个单选按钮转变为一套按钮。

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

分割按钮

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

工具栏

一个多媒体播放器的工具栏。请看基础的标记:一些 button 元素,Shuffle 按钮是一个类型为 checkbox 的 input,Repeat 选项是三个类型为 radio 的 input。

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