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

最新推荐文章于 2024-03-06 18:37:21 发布

引路蜂

最新推荐文章于 2024-03-06 18:37:21 发布

阅读量2.8k

点赞数

分类专栏： jQuery 教程 JavaScript jQuery教程

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

jQuery

48 篇文章

订阅专栏

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>

显示地图

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