首页 » jQuery UI » jQuery UI 实例
网站地图

按钮（Button）

jQuery UI 实例 - 按钮（Button）

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

如需了解更多有关 button 部件的细节，请查看 API 文档 按钮部件（Button Widget）。

默认功能

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 按钮（Button） - 默认功能</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <script>
  11.   $(function() {
  12.     $( "input[type=submit], a, button" )
  13.       .button()
  14.       .click(function( event ) {
  15.         event.preventDefault();
  16.       });
  17.   });
  18.   </script>
  19. </head>
  20. <body>
  21.  
  22. <button>一个 button 元素</button>
  23.  
  24. <input type="submit" value="一个提交按钮">
  25.  
  26. <a href="#">一个锚</a>
  27.  
  28.  
  29. </body>
  30. </html>

复选框

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

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 按钮（Button） - 复选框</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <script>
  11.   $(function() {
  12.     $( "#check" ).button();
  13.     $( "#format" ).buttonset();
  14.   });
  15.   </script>
  16.   <style>
  17.   #format { margin-top: 2em; }
  18.   </style>
  19. </head>
  20. <body>
  21.  
  22. <input type="checkbox" id="check"><label for="check">切换</label>
  23.  
  24. <div id="format">
  25.   <input type="checkbox" id="check1"><label for="check1">B</label>
  26.   <input type="checkbox" id="check2"><label for="check2">I</label>
  27.   <input type="checkbox" id="check3"><label for="check3">U</label>
  28. </div>
  29.  
  30.  
  31. </body>
  32. </html>

图标

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 按钮（Button） - 图标</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <script>
  11.   $(function() {
  12.     $( "button:first" ).button({
  13.       icons: {
  14.         primary: "ui-icon-locked"
  15.       },
  16.       text: false
  17.     }).next().button({
  18.       icons: {
  19.         primary: "ui-icon-locked"
  20.       }
  21.     }).next().button({
  22.       icons: {
  23.         primary: "ui-icon-gear",
  24.         secondary: "ui-icon-triangle-1-s"
  25.       }
  26.     }).next().button({
  27.       icons: {
  28.         primary: "ui-icon-gear",
  29.         secondary: "ui-icon-triangle-1-s"
  30.       },
  31.       text: false
  32.     });
  33.   });
  34.   </script>
  35. </head>
  36. <body>
  37.  
  38. <button>只带有图标的按钮</button>
  39. <button>图标在左侧的按钮</button>
  40. <button>带有两个图标的按钮</button>
  41. <button>带有两个图标且不带文本的按钮</button>
  42.  
  43.  
  44. </body>
  45. </html>

单选

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 按钮（Button） - 单选</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <script>
  11.   $(function() {
  12.     $( "#radio" ).buttonset();
  13.   });
  14.   </script>
  15. </head>
  16. <body>
  17.  
  18. <form>
  19.   <div id="radio">
  20.     <input type="radio" id="radio1" name="radio"><label for="radio1">选择 1</label>
  21.     <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">选择 2</label>
  22.     <input type="radio" id="radio3" name="radio"><label for="radio3">选择 3</label>
  23.   </div>
  24. </form>
  25.  
  26.  
  27. </body>
  28. </html>

分割按钮


  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 按钮（Button） - 分割按钮</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.     .ui-menu { position: absolute; width: 100px; }
  12.   </style>
  13.   <script>
  14.   $(function() {
  15.     $( "#rerun" )
  16.       .button()
  17.       .click(function() {
  18.         alert( "Running the last action" );
  19.       })
  20.       .next()
  21.         .button({
  22.           text: false,
  23.           icons: {
  24.             primary: "ui-icon-triangle-1-s"
  25.           }
  26.         })
  27.         .click(function() {
  28.           var menu = $( this ).parent().next().show().position({
  29.             my: "left top",
  30.             at: "left bottom",
  31.             of: this
  32.           });
  33.           $( document ).one( "click", function() {
  34.             menu.hide();
  35.           });
  36.           return false;
  37.         })
  38.         .parent()
  39.           .buttonset()
  40.           .next()
  41.             .hide()
  42.             .menu();
  43.   });
  44.   </script>
  45. </head>
  46. <body>
  47.  
  48. <div>
  49.   <div>
  50.     <button id="rerun">运行最后的动作</button>
  51.     <button id="select">选择一个动作</button>
  52.   </div>
  53.   <ul>
  54.     <li><a href="#">打开...</a></li>
  55.     <li><a href="#">保存</a></li>
  56.     <li><a href="#">删除</a></li>
  57.   </ul>
  58. </div>
  59.  
  60.  
  61. </body>
  62. </html>

工具栏

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 按钮（Button） - 工具栏</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #toolbar {
  12.     padding: 4px;
  13.     display: inline-block;
  14.   }
  15.   /* support: IE7 */
  16.   *+html #toolbar {
  17.     display: inline;
  18.   }
  19.   </style>
  20.   <script>
  21.   $(function() {
  22.     $( "#beginning" ).button({
  23.       text: false,
  24.       icons: {
  25.         primary: "ui-icon-seek-start"
  26.       }
  27.     });
  28.     $( "#rewind" ).button({
  29.       text: false,
  30.       icons: {
  31.         primary: "ui-icon-seek-prev"
  32.       }
  33.     });
  34.     $( "#play" ).button({
  35.       text: false,
  36.       icons: {
  37.         primary: "ui-icon-play"
  38.       }
  39.     })
  40.     .click(function() {
  41.       var options;
  42.       if ( $( this ).text() === "play" ) {
  43.         options = {
  44.           label: "pause",
  45.           icons: {
  46.             primary: "ui-icon-pause"
  47.           }
  48.         };
  49.       } else {
  50.         options = {
  51.           label: "play",
  52.           icons: {
  53.             primary: "ui-icon-play"
  54.           }
  55.         };
  56.       }
  57.       $( this ).button( "option", options );
  58.     });
  59.     $( "#stop" ).button({
  60.       text: false,
  61.       icons: {
  62.         primary: "ui-icon-stop"
  63.       }
  64.     })
  65.     .click(function() {
  66.       $( "#play" ).button( "option", {
  67.         label: "play",
  68.         icons: {
  69.           primary: "ui-icon-play"
  70.         }
  71.       });
  72.     });
  73.     $( "#forward" ).button({
  74.       text: false,
  75.       icons: {
  76.         primary: "ui-icon-seek-next"
  77.       }
  78.     });
  79.     $( "#end" ).button({
  80.       text: false,
  81.       icons: {
  82.         primary: "ui-icon-seek-end"
  83.       }
  84.     });
  85.     $( "#shuffle" ).button();
  86.     $( "#repeat" ).buttonset();
  87.   });
  88.   </script>
  89. </head>
  90. <body>
  91.  
  92. <div id="toolbar" class="ui-widget-header ui-corner-all">
  93.   <button id="beginning">开头</button>
  94.   <button id="rewind">快退</button>
  95.   <button id="play">播放</button>
  96.   <button id="stop">停止</button>
  97.   <button id="forward">快进</button>
  98.   <button id="end">结尾</button>
  99.  
  100.   <input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label>
  101.  
  102.   <span id="repeat">
  103.     <input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label>
  104.     <input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label>
  105.     <input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label>
  106.   </span>
  107. </div>
  108.  
  109.  
  110. </body>
  111. </html>