您的位置：首页 > Web前端 > JQuery

jQuery 入门教程(40): jQuery UI Spiner 示例

2014-01-15 13:07 507 查看


Spinner主要用来输入各种格式的数字，可以使用鼠标滚轮，键盘方向键来修改输入值，也支持直接键入数字。支持本地化的输入金额和时间。

基本用法

下面代码显示了Spinner的基本用法，设置和取得Spinner的当前值。

1
<!doctypehtml>
2
<
html
lang
=
"en"
>
3
<
head
>
4
<
meta
charset
=
"utf-8"
/>
5
<
title
>jQueryUIDemos</
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
varspinner=$("#spinner").spinner();
12
13
$("#disable").click(function(){
14
if(spinner.spinner("option","disabled")){
15
spinner.spinner("enable");
16
}else{
17
spinner.spinner("disable");
18
}
19
});
20
$("#destroy").click(function(){
21
if(spinner.data("ui-spinner")){
22
spinner.spinner("destroy");
23
}else{
24
spinner.spinner();
25
}
26
});
27
$("#getvalue").click(function(){
28
alert(spinner.spinner("value"));
29
});
30
$("#setvalue").click(function(){
31
spinner.spinner("value",5);
32
});
33
34
$("button").button();
35
});
36
</
script
>
37
</
head
>
38
<
body
>
39
40
<
p
>
41
<
label
for
=
"spinner"
>Select
avalue:</
label
>
42
<
input
id
=
"spinner"
name
=
"value"
/>
43
</
p
>
44
45
<
p
>
46
<
button
id
=
"disable"
>Toggle
disable/enable</
button
>
47
<
button
id
=
"destroy"
>Toggle
widget</
button
>
48
</
p
>
49
50
<
p
>
51
<
button
id
=
"getvalue"
>Get
value</
button
>
52
<
button
id
=
"setvalue"
>Set
valueto5</
button
>
53
</
p
>
54
55
56
</
body
>
57
</
html
>




显示地图

本例使用两个Spinner，以步长为0.001做为经纬度，然后和Google地图配合，通过Spinner修改地图的中心。

此外为了适应GoogleMapAPI,需要添加对其引用

代码如下：

1
<!doctypehtml>
2
<
html
lang
=
"en"
>
3
<
head
>
4
<
meta
charset
=
"utf-8"
/>
5
<
title
>jQueryUIDemos</
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
src
=
"http://maps.google.com/maps/api/js?sensor=false"
></
script
>
10
<
script
>
11
$(function(){
12
functionlatlong(){
13
returnnewwindow.google.maps.LatLng($("#lat").val(),
14
$("#lng").val());
15
}
16
functionposition(){
17
map.setCenter(latlong());
18
}
19
$("#lat,#lng").spinner({
20
step:.001,
21
change:position,
22
stop:position
23
});
24
25
varmap=newwindow.google.maps.Map($("#map")[0],{
26
zoom:8,
27
center:latlong(),
28
mapTypeId:window.google.maps.MapTypeId.ROADMAP
29
});
30
});
31
</
script
>
32
<
style
>
33
#map{
34
width:500px;
35
height:500px;
36
}
37
</
style
>
38
</
head
>
39
<
body
>
40
41
<
label
for
=
"lat"
>Latitude</
label
>
42
<
input
id
=
"lat"
name
=
"lat"
value
=
"44.797"
/>
43
<
br
/>
44
<
label
for
=
"lng"
>Longitude</
label
>
45
<
input
id
=
"lng"
name
=
"lng"
value
=
"-93.278"
/>
46
47
<
div
id
=
"map"
></
div
>
48
49
50
</
body
>
51
</
html
>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航