jQuery UI 范例 - 按钮（Button）

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

默认功能

可用于按钮的标记范例：一个 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>

程序猿的技术大观园：www.javathinker.net

[这个贴子最后由 flybird 在 2020-02-21 10:12:25 重新编辑]

Java精品书籍推荐