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

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

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

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             var spinner = $("#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 a value:</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 value to 5</button>
53     </p>
54  
55  
56 </body>
57 </html>

jQuery 入门教程(40): jQuery UI Spiner 示例_第1张图片

显示地图

本例使用两个Spinner,以步长为0.001 做为经纬度,然后和Google地图配合,通过Spinner修改地图的中心。
此外为了适应Google Map API,需要添加对其引用

代码如下:

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 src="http://maps.google.com/maps/api/js?sensor=false"></script>
10     <script>
11         $(function () {
12             function latlong() {
13                 return new window.google.maps.LatLng($("#lat").val(),
14                     $("#lng").val());
15             }
16             function position() {
17                 map.setCenter(latlong());
18             }
19             $("#lat, #lng").spinner({
20                 step: .001,
21                 change: position,
22                 stop: position
23             });
24  
25             var map = new window.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>

jQuery 入门教程(40): jQuery UI Spiner 示例_第2张图片

 

你可能感兴趣的:(jQuery 入门教程(40): jQuery UI Spiner 示例)