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

最新推荐文章于 2023-04-08 08:26:09 发布

引路蜂

最新推荐文章于 2023-04-08 08:26:09 发布

阅读量3.7k

点赞数 2

分类专栏： JavaScript jQuery 教程 jQuery教程

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

jQuery

48 篇文章

订阅专栏

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>