输入数字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>
    每日一道理
闷热的天，蝉儿耐不住寂寞地不停在鸣叫，我孤单一人，寂静的身旁没有一个知音，想疯狂地听摇滚乐，听歇斯底里的歌声，那只为逃避无人的世界里那浓烈的孤单气息。一个人是清冷，两个人便是精彩，于是，莫名的冲动让我格外想念旧日的好友，怀念过去的日子，尽管不够现实的遐想追回不了曾经一切，但却希望思绪可以飞扬于闭上双目后的世界中，印有微笑，印有舞动的身姿，翩翩起舞……

    20130320017

    示显舆图

    本例应用两个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>

    20130320018

文章结束给大家分享下程序员的一些笑话语录： Google事件并不像国内主流媒体普遍误导的那样，它仅仅是中国Z府和美国公司、中国文化和美国文化甚至中国人和美国人之间的关系，是民族主义和帝国主义之间的关系；更重要的是，它就是Z府和公司之间的关系，是权力管制和市场自由之间的关系。从这个意义上说，过度管制下的受害者，主要是国内的企业。Google可以抽身而去，国内的企业只能祈望特区。www.ishuo.cn

posted @ 2013-05-01 11:57  xinyuyuanm  阅读(284)  评论(0)    收藏  举报