jQuery 入门教程(26): jQuery UI Button示例（一）

最新推荐文章于 2024-02-25 15:10:29 发布

翻译最新推荐文章于 2024-02-25 15:10:29 发布 · 3.7k 阅读

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

jQuery

48 篇文章

订阅专栏

本文介绍了如何使用jQuery Button组件来增强表单中的按钮样式，并展示了如何应用到不同类型的元素上，包括基本按钮、复选框按钮、图标按钮及单选钮组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery Button 组件可以增强表单（Form)中的Buttons，Inputs和Anchor元素，使其具有按钮显示风格，能够正确对鼠标滑动做出反应。
基本用法
下例显示把表单中的button,input和anchor元素都变为按钮风格的jQuery Button组件。

    1<!doctype html>

    2<html lang="en">

    3<head>

    4    <meta charset="utf-8" />

    5    <title>jQuery UI Demos</title>

    6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />

    7    <script src="scripts/jquery-1.9.1.js"></script>

    8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>

    9    <script>

    10        $(function () {

    11            $("input[type=submit], a, button")

    12              .button()

    13              .click(function (event) {

    14                  event.preventDefault();

    15              });

    16        });

    17    </script>

    18</head>

    19<body>

    20 

    21    <button>A button element</button>

    22 

    23    <input type="submit" value="A submit button" />

    24 

    25    <a href="#">An anchor</a>

    26 

    27</body>

    28</html>

checkboxes
除了支持基本的按钮外，jQuery Button组件可以把类型为checkbox的input元素变为按钮，这种按钮可以有两种状态，原态和按下状态。

    1<!doctype html>

    2<html lang="en">

    3<head>

    4    <meta charset="utf-8" />

    5    <title>jQuery UI Demos</title>

    6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />

    7    <script src="scripts/jquery-1.9.1.js"></script>

    8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>

    9    <script>

    10        $(function () {

    11            $("input[type=submit], a, button")

    12              .button()

    13              .click(function (event) {

    14                  event.preventDefault();

    15              });

    16        });

    17    </script>

    18</head>

    19<body>

    20    <button>A button element</button>

    21    <input type="submit" value="A submit button" />

    22    <a href="#">An anchor</a>

    23</body>

    24</html>

显示图标
按钮也可以添加图标，可以支持多个图标，分别使用primary和secondary来指明。

    1<!doctype html>

    2<html lang="en">

    3<head>

    4    <meta charset="utf-8" />

    5    <title>jQuery UI Demos</title>

    6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />

    7    <script src="scripts/jquery-1.9.1.js"></script>

    8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>

    9    <script>

    10        $(function () {

    11            $("button:first").button({

    12                icons: {

    13                    primary: "ui-icon-locked"

    14                },

    15                text: false

    16            }).next().button({

    17                icons: {

    18                    primary: "ui-icon-locked"

    19                }

    20            }).next().button({

    21                icons: {

    22                    primary: "ui-icon-gear",

    23                    secondary: "ui-icon-triangle-1-s"

    24                }

    25            }).next().button({

    26                icons: {

    27                    primary: "ui-icon-gear",

    28                    secondary: "ui-icon-triangle-1-s"

    29                },

    30                text: false

    31            });

    32        });

    33    </script>

    34</head>

    35<body>

    36    <button>Button with icon only</button>

    37    <button>Button with icon on the left</button>

    38    <button>Button with two icons</button>

    39    <button>Button with two icons and no text</button>

    40</body>

    41</html>

Radio单选钮
同样，jQuery也把type为radio的一组Radio按钮构成一组单选钮，使用.buttonset 将多个单选钮定义为一个组，其中只有一个可以是选中状态。

    1<!doctype html>

    2<html lang="en">

    3<head>

    4    <meta charset="utf-8" />

    5    <title>jQuery UI Demos</title>

    6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />

    7    <script src="scripts/jquery-1.9.1.js"></script>

    8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>

    9    <script>

    10        $(function () {

    11            $("#radio").buttonset();

    12        });

    13  </script>

    14</head>

    15<body>

    16 

    17<form>

    18  <div id="radio">

    19      <input type="radio" id="radio1" name="radio" />

    20      <label for="radio1">Choice 1</label>

    21      <input type="radio" id="radio2" name="radio" checked="checked" />

    22      <label for="radio2">Choice 2</label>

    23      <input type="radio" id="radio3" name="radio" />

    24      <label for="radio3">Choice 3</label>

    25  </div>

    26</form>

    27 </body>

    28</html>