Button ，可以使用 <button> <input> <a>。 <input> 中的不同类型，submit , radio , checkbox 。还能加上 icon ，split button 。
Autoconplete 为校准 文本 <input>提供了一个文本选择的菜单。当浏览者开始在<input>中输入时，会自动匹配输入的字符，显示建议。 允许通过箭头按键导航，Enter键选中，Esc键关闭菜单。当箭头键被用来导航时，每个建议都会出现在<input>中。如果Esc用来关闭导航，<input>的 value 会回复到用户输入的状态。
- 标准button的安装启用
- 配置选项
- 添加icon
- button 事件
- button组
- button方法
- 使用本地数据源的autocomplete
- autocomplete的配置选项
- autocomplete事件
- autocomplete独特的方法
- 使用远程数据源的autocomplete
- 在autocomplete的建议菜单中使用HTML
1.1 标准安装启用
当使用<a>或 <button> 元素创建 button ，一个<span>元素会被自动创建，并嵌入其中。这个<span>会包含button 的 label text.
1
<
a
href
=""
id
="myButton"
>
A link button
</
a
>
2
<
button
id
="myButton2"
>
button
</
button
>
3
<
input
id
="myButton3"
value
="An input button"
>
4
$(function(){
5
$("#myButton").button();
6
$("#myButton2").button();
7
$("#myButton3").button();
8
});
<input> 元素不允许包含子元素，所以<span>不会在使用<input>创建button的时候出现。
<a>元素通过制定 href 属性，会简单地将浏览者送往新的页面或anchor。
使用 <button> 元素同上，只是不需要添加 href属性。使用<input>元素也很简单，它使用 value属性设置 button 的文本。
1.2 配置选项
Option | Default Value | Used to… |
disabled | false | 禁用button实例 |
icons | {primary:null,secondary:null} | 设置button实例的icons |
label | value属性或下层元素的文本 | 设置button实例的text |
text | true | 当使用icon-only时，隐藏button的 text |
label选项配置的值会覆盖<a>元素的文本。
1.3 button的 icons
button在大多数情况下顶多有另个icon。当一个<a>或<button>元素被用来创建button，我们可以使用icons配置选项来为其指定一个或两个icons。
1
var buttonOpts={
2
icons:{
3
primary:"ui-icon-disk",
4
secondary:"ui-icon-triangle-1-s"
5
},
6
text:false
7
};
icons属性接受一个对象，它包含最多两个键，primary和secondary。这些选项的值可以是 jquery.ui.theme.css 文件中的任何 ui-icon- classes。icons使用<span>元素添加到控件中。
1.4 input 的 icons
尽管子元素<span>可以用来显示指定的icon，但是我们不能为<input>元素添加子元素。我们可以使用额外的容器，包含<span>元素和一些自定义的CSS，简单地为<input>添加我们自己的icons。
1
<
style
>
2
.iconic-input
{
display
:
inline-block
;
position
:
relative
;
}
3
.ui-icon
{
z-index
:
2
;
}
4
.iconic-input input
{
border
:
none
;
margin
:
0
;
}
5
</
style
>
6
</
script
>
7
<
div
class
="iconic-input ui-button-text-icons ui-state-default ui-corner-all"
>
8
<
span
class
="ui-button-icon-primary ui-icon ui-icon-disk"
></
span
>
9
<
input
id
="myButton"
type
="button"
value
="Input icons"
class
="ui-button-text"
>
10
<
span
class
="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"
></
span
>
11
</
div
>
在较老版本的IE中不支持display:inline-block样式。为了防止button占满它的容器，我们需要将其浮动，设置期望宽度。
两端的icons 没有 hover states，这是因为控件为<input>应用了必须的 classnames，没有给我们自定义的容器。我们可以为icon添加必要的行为。
1
$("#myButton").button().hover(function(){
2
$(this).parent().addClass("ui-state-hover");
3
},function(){
4
$(this).parent().removeClass("ui-state-hover");
5
});
为icon添加悬停效果。多数情况下，使用<a> 和<button>元素创建 button 会更简单，更有效率。
1.5 button 的事件
使用<a>元素创建的button，会通过href跳转。在 <form>中使用 <button>或<input>元素，创建带有 type 属性的设置，会提交表单数据。
button控件只暴露了一个事件 create 事件。当 button 实例初始化创建后被触发。
我们也许想要收集一些注册信息，并使用 button 发送信息到服务器。
1
<
form
method
="post"
action
="aa.php"
>
2
<
label
for
="name"
>
Name:
3
<
input
type
="text"
id
="name"
name
="name"
>
4
</
label
>
5
<
label
for
="email"
>
Email:
6
<
input
type
="text"
id
="email"
name
="email"
>
7
</
label
>
8
<
button
type
="submit"
id
="myButton"
>
Register
</
button
>
9
</
form
>
10
11
$(function(){
12
$("#myButton").button().click(function(e){
13
e.preventDefault();
14
var form=$("form"),
15
formData={
16
name:form.find("#name").val(),
17
email:form.find("#email").val()
18
};
19
console.log(formData);
20
$.post("aa.php",formData,function(){
21
$("#myButton").button("option","disabled",true);
22
form.find("label").remove();
23
$("
<
label
/>
").text("Thanks for registering!").prependTo(form);
24
})
25
});
26
});
1.6 button组
button控件也可以用来结合 radio buttons 和 checkboxes 。button是 jQuery UI 控件中，独一无二的，有两个方法的控件，它还有一个 buttonset() 方法，用来创建一组由 radio buttons 和 chekboxes 组成的button。
1.6.1 Checkbox buttonsets
1
<
div
id
="buttons"
>
2
<
h2
>
Programming Languages
</
h2
>
3
<
p
>
Select all languages you know:
</
p
>
4
<
label
for
="js"
>
JavaScript
</
label
>
5
<
input
id
="js"
type
="checkbox"
>
6
<
label
for
="py"
>
Python
</
label
>
7
<
input
id
="py"
type
="checkbox"
>
8
<
label
for
="cSharp"
>
C#
</
label
>
9
<
input
id
="cSharp"
type
="checkbox"
>
10
<
label
for
="jv"
>
Java
</
label
>
11
<
input
id
="jv"
type
="checkbox"
>
12
</
div
>
13
$(function(){
14
$("#buttons").buttonset();
15
});
当一个checkbox被选中，它会被应用 selected 状态。在HTML5中，使用关联的<label>元素构建form时，不允许使用button 控件。
1.6.2 Radio buttonsets
与checkbox 的区别仅仅在行为上，所有的<input>都必须有 name 属性。
1
<
div
id
="buttons"
>
2
<
h2
>
Programming Languages
</
h2
>
3
<
p
>
Select all languages you know:
</
p
>
4
<
label
for
="js"
>
JavaScript
</
label
>
5
<
input
id
="js"
type
="radio"
name
="lang"
>
6
<
label
for
="py"
>
Python
</
label
>
7
<
input
id
="py"
type
="radio"
name
="lang"
>
8
<
label
for
="cSharp"
>
C#
</
label
>
9
<
input
id
="cSharp"
type
="radio"
name
="lang"
>
10
<
label
for
="jv"
>
Java
</
label
>
11
<
input
id
="jv"
type
="radio"
name
="lang"
>
12
</
div
>
1.7 Button 的方法
除了 destroy , disable, enable ,widget , option 这些公共的方法，button 控件只暴露了一个自定义的方法，refresh方法。它用来以代码的方式改变checkbox 和 raido 的状态。
1
<
div
id
="buttons"
>
2
<
h2
>
Programming Languages
</
h2
>
3
<
p
>
Select all languages you know:
</
p
>
4
<
label
for
="js"
>
JavaScript
</
label
>
5
<
input
id
="js"
type
="checkbox"
>
6
<
label
for
="py"
>
Python
</
label
>
7
<
input
id
="py"
type
="checkbox"
>
8
<
label
for
="cSharp"
>
C#
</
label
>
9
<
input
id
="cSharp"
type
="checkbox"
>
10
<
label
for
="jv"
>
Java
</
label
>
11
<
input
id
="jv"
type
="checkbox"
>
12
</
div
>
13
<
br
>
14
<
button
type
="button"
id
="select"
>
Select all
</
button
>
15
<
button
type
="button"
id
="deselect"
>
Deselect all
</
button
>
16
17
$(function(){
18
$("#buttons").buttonset();
19
$("#select").button().click(function(){
20
$("#buttons").find("input").attr("checked",true).button("refresh");
21
});
22
$("#deselect").button().click(function(){
23
$("#buttons").find("input").attr("checked",false).button("refresh");
24
});
25
});
当 Select all button被点击，我们设置 cheked 属性为 true 。这会检查底层并且隐藏的check boxes，单不会对作为button显示的<label>元素做任何事情。更新这些button 的状态，让他们显示被选中，需要调用 refresh 方法。
2 autocomplete 控件
1
<
label
>
Enter your city:
</
label
>
2
<
input
id
="city"
>
3
4
$(function(){
5
var autoOpts = {
6
source: [
7
"Aberdeen", "Armagh", "Bangor", "Bath", "Canterbury",
8
"Cardiff",
9
"Derby", "Dundee", "Edinburgh", "Exeter", "Glasgow",
10
"Gloucester",
11
"Hereford", "Inverness", "Leeds", "London", "Manchester",
12
"Norwich",
13
"Newport", "Oxford", "Plymouth", "Preston", "Ripon",
14
"Southampton",
15
"Swansea", "Truro", "Wakefield", "Winchester", "York"
16
]
17
};
18
$("#city").autocomplete(autoOpts);
19
});
在配置对象中，使用了 source 选项，指定了一个本地字符串数组。source选项时强制性地，必须被定义。
2.1 使用对象数组作为数据源
1
var autoOpts = {
2
source: [
3
{ value: "AB", label: "Aberdeen" },
4
{ value: "AR", label: "Armagh" }
5
]
6
}
每个对象有两个keys ： value 和 label 。value的值是选中的值，label 用来显示在建议的选择列表中。如果某一个对象只有一个 key，则它既是value 也是 label。
2.2 配置 autocomplete 选项
Option | Default Value | Used to… |
appendTo | “body” | 指定将控件添加到哪个元素上 |
autofocus | false | 当显示建议列表时，focus第一个建议 |
delay | 300 | 指定浏览者输入字符后，延迟显示建议列表的milliseconds数 |
disabled | false | 禁用控件 |
minLength | 1 | 指定在显示建议列表前，访问者需要输入的最短字符长度 |
position | {my:”left top”,at:”left bottom”,collision:”none”} | 指定建议列表应该显示在相对<input>的位置。它和 position 功能接受一样的值 |
source | | 指定用来填充建议列表的数据源。这个选项是强制和必须被配置的。它接受一个数组，字符串，或一个函数。 |
2.2.1 配置最小长度
设置 minLength 选项为高于默认值1 的数，可以使建议列表变窄。在处理大量远程数据源时，这很重要，可以缩小远程数据源返回的数据。
2.2.2 将建议列表附加到一个可选的元素上
默认地，建议列表被附加到页面的<body>，position 功能用来定义列表的位置，所以他能显示到关联的<input>上。我们可以使用 appendTo 选项，改变，并制定该元素。
appendTo: "#container"
这可以使创建出来的 <ul> 被附加到 container上，而不是body上。
2.3 autocomplete 事件
Evnet | Fired when… |
change | 列表中的一个建议被选中。这个事件会被触发，一旦列表已经关闭，并且<input>已经社区focus |
close | 建议列表已经关闭 |
create | 一个控件实例被创建 |
focus | 键盘被用来focus一个建议 |
open | 建议目录被显示 |
search | 请求将要显示的建议 |
select | 一个建议被选中 |
当我们使用一个对象数组作为数据源，对象中有超过 label 和 value 属性之外的附加数据时，select事件此时很有用。
1
<
label
>
Enter your city:
</
label
>
2
<
input
id
="city"
>
3
$(function(){
4
var autoOpts = {
5
source: [
6
{ value: "AB", label: "Aberdeen", population: 212125 },
7
{ value: "AR", label: "Armagh", population: 54263 }
8
],
9
select:function(e,ui){
10
if($("#pop").length){
11
$("#pop").text(ui.item.label+"'s population is : "+ui.item.population);
12
}
13
else{
14
$("
<
p
></
p
>
").attr("id","pop").text(ui.item.label+"'s population is : "+ui.item.population).insertAfter("#city");
15
}
16
}
17
};
18
$("#city").autocomplete(autoOpts);
我们使用select 事件，来获得 label 和 我们额外的属性。
2.4 Autocomplete 方法
Method | Used to… |
close | 关闭建议目录 |
search | 从数据源请求建议列表，指定 search term 作为可选参数 |
2.5 使用远程数据源
2.5.1 使用一个字符串作为数据源选项的值
1
var autoOpts = {
2
source: "http://danwellman.co.uk/countries.php?callback=?"
3
};
因此，当使用一个字符串作为数据源选项的值时，传回来的数据应该是一个对象数组。每个对象包含至少一个key ，label。数据可以通过 cross-domain 请求获得 JSON 或 JSONP 。控件会自动在输入的字符后，添加查询字符串 term= 。
当我们从我们不能控制的公共网络服务器获取数据时，数据格式也许不正确。我们需要使用一个函数作为数据源选项的值，手工转换数据。
2.5.2 使用函数作为数据源选项的值
我们使用函数请求数据，处理数据，然后将其传给控件。
1
<
div
id
="formWrap"
>
2
<
form
id
="messageForm"
action
="#"
method
="post"
>
3
<
fieldset
>
4
<
legend
>
New message form
</
legend
>
5
<
span
>
New message
</
span
>
6
<
div
class
="inner-form ui-helper-clearfix"
>
7
<
label
for
="toList"
>
To:
</
label
>
8
<
div
id
="toList"
class
="ui-helper-clearfix"
>
9
<
input
id
="to"
type
="text"
>
10
<
input
id
="emails"
type
="hidden"
>
11
</
div
>
12
<
label
for
="message"
>
Message:
</
label
>
13
<
textarea
id
="message"
name
="message"
rows
="2"
cols
="50"
>
14
</
textarea
>
15
</
div
>
16
<
div
class
="button ui-helper-clearfix"
>
17
<
button
type
="submit"
>
Send
</
button
>
18
<
a
href
="#"
title
="Cancel"
>
Cancel
</
a
>
19
20
</
div
>
21
</
fieldset
>
22
</
form
>
23
</
div
>
24
<
input
id
="country"
>
25
<
script
src
="jq/jquery-1.4.4.js"
></
script
>
26
<
script
src
="jq/jquery-ui-1.8.9.js"
></
script
>
27
<
script
src
="jq/jquery-ui-i18n.min-1.8.9.js"
></
script
>
28
<
script
>
29
var
autoOpts
=
{
30
source:
function
(req,resp){
31
$.getJSON(
"
http://danwellman.co.uk/contacts.php?callback=?
"
,
32
req,
33
function
(data){
34
var
suggestions
=
[];
35
$.each(data,
function
(i,val){
36
var
obj
=
{};
37
obj.value
=
val.name;
38
obj.email
=
val.email;
39
suggestions.push(obj);
40
});
41
resp(suggestions);
42
});
43
},
44
select:
function
(e,ui){
45
var
emailList
=
$(
"
#emails
"
),
46
emails
=
emailList.val().split(
"
,
"
),
//
split分割出来的是数组
47
span
=
$(
"
<span>
"
+
ui.item.value
+
"
</span>
"
),
48
a
=
$(
"
<a href='#' class='remove' title='Remove'>x</a>
"
).appendTo(span);
49
span.insertBefore(
"
#to
"
);
50
emails.push(ui.item.email);
51
emailList.val(emails.join(
"
,
"
));
52
$(
"
#to
"
).remove();
53
$(
"
<input id='to'>
"
).insertBefore(
"
#emails
"
).autocomplete(autoOpts);
54
}
55
};
56
$(
"
#to
"
).autocomplete(autoOpts);
57
$(
"
#toList
"
).click(
function
(){
58
$(
"
#to
"
).focus();
59
});
60
//
delegate() 方法为指定的元素（属于被选元素的一个或多个子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
61
//
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
62
$(
"
#toList
"
).delegate(
"
a
"
,
"
click
"
,
function
(){
63
var
email
=
$(
this
).parent().data(
"
email
"
),
64
65
emails
=
$(
this
).val().split(
"
,
"
);
66
$(
this
).parent().remove();
67
$.each(emails,
function
(i,val){
68
if
(val
===
email){
69
emails.splice(i,
1
);
//
从数组中移除某些元素, StartIndex,Count
70
}
71
});
72
73
$(
"
#emails
"
).val(emails);
74
});
75
</
script
>
76
<
style
>
77
#formWrap
{
78
padding
:
10px
;
position
:
absolute
;
background-color
:
#000
;
79
background
:
rgba(82,82,82,0.7)
;
border-radius
:
8px
;
80
font
:
bold 14px "lucida grande",tahoma,verdana,arial,sans-serif
;
81
}
82
#formWrap a:hover
{
color
:
#ff0000
;
}
83
#messageForm
{
84
width
:
467px
;
border
:
1px solid #666
;
background-color
:
#eee
;
85
}
86
#messageForm fieldset
{
87
padding
:
0
;
margin
:
0
;
position
:
relative
;
border
:
none #CCC
;
88
background-color
:
#fff
;
89
}
90
#messageForm legend
{
91
visibility
:
hidden
;
height
:
0
;
92
}
93
#messageForm span
{
94
display
:
block
;
width
:
467p
;
padding
:
10px 0
;
background-color
:
#6D84B4
;
95
border
:
#3B5998 #3B5998
;
color
:
#fff
;
text-indent
:
20px
;
96
}
97
.inner-form
{
padding
:
20px
;
}
98
#toList
{
99
width
:
349px
;
min-height
:
27px
;
padding
:
3px 3px 0 3px
;
100
border
:
1px solid #6D84B4
;
mairgin-bottom
:
8px
;
float
:
left
;
101
background-color
:
#fff
;
cursor
:
text
;
102
}
103
#messageForm #to
{
104
width
:
10px
;
padding
:
0
;
position
:
relative
;
top
:
4px
;
float
:
left
;
105
border
:
none
;
106
}
107
#messageForm input,#messageForm textarea
{
108
display
:
block
;
width
:
349px
;
padding
:
3px
;
border
:
1px solid #6D84B4
;
109
float
:
left
;
outline
:
none
;
110
}
111
#messageForm textarea
{
resize
:
vertical
;
}
112
#messageForm label
{
113
width
:
60px
;
margin
:
7px 10px 0 0
;
float
:
left
;
corlor
:
#666
;
114
font-size
:
11px
;
text-align
:
right
;
115
}
116
.buttons
{
padding
:
10px 20px
;
background-color
:
#f2f2f2
;
}
117
.button a
{
118
margin
:
3px 10px 0 0
;
float
:
right
;
font-size
:
11px
;
color
:
#6D84B4
;
119
}
120
.buttons button
{
float
:
right
}
121
#toList span
{
122
width
:
auto
;
margin
:
0 3px 3px 0
;
padding
:
3px 20px 4px 8px
;
123
border
:
1px solid #9DACCC
;
border-radius
:
3px
;
position
:
relative
;
124
float
:
left
;
font-size
:
11px
;
font-weight
:
normal
;
text-indent
:
0
;
125
background-color
:
#E2E6F0
;
color
:
#1C2A47
;
126
}
127
#toList span a
{
128
position
:
absolute
;
right
:
7px
;
top
:
1px
;
color
:
#666
;
129
font-weight
:
bold
;
font-size
:
12px
;
text-decoration
:
none
;
130
}
131
.ui-menu .ui-menu-item
{
132
white-space
:
nowrap
;
padding
:
0 10px 0 0
;
133
}
134
</
style
>
jsonp1376905372318([{"name":"Admiral Ackbar","email":"akbar@alliance.org"},{"name":"Admiral Ozzel","email":"ozzy@empire.org"}])
我们使用<div>，设置它的样式，是它看起来像一个 <input>，在它里面使用一个无样式的真实的<input> 。这个真实的<input>是必须的，这样浏览者能输入，autocomplete与其关联。我们使用<div>元素师因为我们不能在<input>中插入<span>元素。我们也需要一个隐藏的<input>，它被用来存储实际的 e-mail 地址。
在脚本里，我们使用一个函数作为数据源选项的值。每次<input>里的文本改变，这个函数就会被调用。这个函数接受两个参数，第一个是 req ，包含一个叫做 term 的属性，是输入到<input>里的字符。第二个， resp ，是一个回调函数，我们在显示建议目录时会调用的。
这个函数中，我们首先做JSON 请求。建一个空数组，将请求到的每个 json 对象中的 item。
我们使用 jQuery 的 each() 方法处理每一个返回的item。我们创建一个新的对象，给它加上value和email属性。控件会显示value属性。
每个新创建的对象都被加入建议数组，这个数组会传给resp的回调函数。
我们使用 select 配置选项，来处理不标准的远程数据。这个函数接受两个参数，event 对象 和一个 ui 对象。
在这个函数中，我们首先缓存隐藏的<input>的选择器，并通过它的吻遍，创建一个数组存储分隔后的e-mail地址。
我们然后创建一个<span>元素，并通过 ui.item.value 设置它的文本为被选择的值。偶们也创建了一个 <a> 元素，将它附加到这个新的 <span>上。这个元素用来移除 收件人列表中的<span>。我们也在 <span> 上添加了e-mail 地址作为 data，所以每个收件人名字都能关联到它的 e-mail 地址。
然后我们将这个<span>元素插入到 <div> 元素，对它使用样式，使它看起来像一个 <input> ，然后，通过 ui.item.email 将它的 email 属性添加到 emails 数组，作为 隐藏的 <input> 的值。
2.6 在建议列表中播放HTML
默认地，autocomplete 控件会仅仅播放每个建议的文本。这里有一个扩展插件，可以帮助我们在建议列表中显示html，来高亮用户输入的字符。
1
<
label
for"city"
>
Enter a city
</
label
>
2
<
input
id
="city"
>
3
4
<
script
src
="jq/jquery.ui.autocomplete.html.js"
></
script
>
5
6
$(function(){
7
var data = [
8
{ value: "Aberdeen", label: "Aberdeen" },
9
{ value: "York", label: "York" }
10
],
11
autoOpts={
12
html:true,
13
source:function(req,resp){
14
var suggestions=[],
15
regEx=new RegExp("^"+req.term,"i");
16
$.each(data,function(i,val){
17
if(val.label.match(regEx)){
18
var obj={};
19
obj.value=val.value;
20
obj.label=val.label.replace(regEx,"
<
span
>
"+req.term+"
</
span
>
");
21
suggestions.push(obj);
22
}
23
});
24
resp(suggestions);
25
}
26
};
27
$("#city").autocomplete(autoOpts);
28
});
29
30
<
style
>
31
span
{
color
:
red !important
;
}
32
</
style
>
在我们的配置对象中，我们指定一个新选项 html 被设为 true ，用来结合 html 扩展。
我们创建一个新的空数组，定义了一个新的正则表达式对象，它会在毫无知觉的情况下，匹配用户输入的字符。
