jQuery 入门教程(26): jQuery UI Button示例(一)
不点
阅读:586
2021-04-01 09:59:02
评论:0
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 > |
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。