jQuery Button 组件可以增强表单(Form)中的Buttons,Inputs和Anchor元素,使其具有按钮显示风格,能够正确对鼠标滑动做出反应。
基本用法
下例显示把表单中的button,input和anchor元素都变为按钮风格的jQuery Button组件。
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 > |
11 | $("input[type=submit], a, button") |
13 | .click(function (event) { |
14 | event.preventDefault(); |
21 | < button >A button element</ button > |
23 | < input type = "submit" value = "A submit button" /> |
25 | < a href = "#" >An anchor</ a > |
![20130316006](https://i-blog.csdnimg.cn/blog_migrate/e844350db3f4a3b311bf681690b0f9df.png)
checkboxes
除了支持基本的按钮外,jQuery Button组件可以把类型为checkbox的input元素变为按钮,这种按钮可以有两种状态,原态和按下状态。
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 > |
11 | $("input[type=submit], a, button") |
13 | .click(function (event) { |
14 | event.preventDefault(); |
20 | < button >A button element</ button > |
21 | < input type = "submit" value = "A submit button" /> |
22 | < a href = "#" >An anchor</ a > |
![20130316007](https://i-blog.csdnimg.cn/blog_migrate/70eb3b6bf8cbeb8cfd97806d817504f4.png)
显示图标
按钮也可以添加图标,可以支持多个图标,分别使用primary和secondary来指明。
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 > |
11 | $("button:first").button({ |
13 | primary: "ui-icon-locked" |
18 | primary: "ui-icon-locked" |
22 | primary: "ui-icon-gear", |
23 | secondary: "ui-icon-triangle-1-s" |
27 | primary: "ui-icon-gear", |
28 | secondary: "ui-icon-triangle-1-s" |
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 > |
![20130316008](https://i-blog.csdnimg.cn/blog_migrate/89c8177573cab3cdb8cce718c2c95511.png)
Radio单选钮
同样,jQuery也把type为radio的一组Radio按钮构成一组单选钮,使用.buttonset 将多个单选钮定义为一个组,其中只有一个可以是选中状态。
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 > |
11 | $("#radio").buttonset(); |
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 > |
![20130316009](https://i-blog.csdnimg.cn/blog_migrate/b4c61bb7168ad14aa511a93f4b300666.png)