23-讨论

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

11.5.3　讨论

Spinner插件提供几个选项进一步限制输入：

min 设置低限，例如，−10或者100。
max 设置高限，例如，10或者200。
stepping 限制增量值，例如5；默认为1。

当使用Spinner输入货币值时，可以用 currency 选项，在输入框中显示相应的符号。

下面的例子组合以上选项，创建一个捐赠表单：

<label for="currency">Currency</label>
<select id="currency" name="currency">
　　 <option value="$">US $</option>
　　 <option value="€">EUR€</option>
　　 <option value="￥">YEN￥</option>
</select>
<br/>
<label for="amount">Select the amount to donate:</label>
<input id="amount" name="amount" value="5" />

我们有一个用于货币的选择列表和输入金额的文本输入框：

var currency = $("#currency").change(function() {
　　 $("#amount").spinner("option", "currency", $(this).val()).blur();
});
$("#amount").spinner({
　　 currency: currency.val(),
　　 min: 5,
　　 max: 1000,
　　 step: 5
});

我们在货币选择列表上绑定修改事件，当选择改变时更新微调框的 currency 选项。

微调框本身用当前值初始化，同时设置 min 、 max 和 step ，将值设置在5～1000，增量为5。例如，5，10，15，20，以此类推。

Google地图整合

输入字段的值也可能是小数；在这种情况下，可以使用 decimal 选项指定小数点后允许的位数。在下面的例子中，显示一个Google地图，使用微调框指定经纬度值。

首先，包含Google Maps API脚本：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>

然后，可以为微调框添加标记和实际的地图，以及一些简单的样式：

<style>
　　 #map { width:500px; height:500px; }
</style>
<label for="lat">Latitude</label>
<input id="lat" name="lat" value="44.797916" />
<br/>
<label for="lng">Longitude</label>
<input id="lng" name="lng" value="-93.278046" />
<div id="map"></div>

据此，可以初始化地图，并与微调框链接：

function latlong() {
　　 return new google.maps.LatLng($("#lat").val(),$("#lng").val());
}
function position() {
　　 map.set_center(latlong());
}
$("#lat, #lng").spinner({
　　 precision: 6,
　　 change: position
});
var map = new google.maps.Map($("#map")[0], {
　　 zoom: 8,
　　 center: latlong(),
　　 mapTypeId: google.maps.MapTypeId.ROADMAP
});

position 函数将地图中心设置为从微调框获取的经度和纬度值。初始化时把 decimal 选项设置为6，并为 change 选项传递 position 函数。这样，地图在一个微调框出现变化时更新。然后用Google Maps API初始化地图。

这个例子中微调框的缺点是递增和递减只影响小数点之前的数字，所以滚动效果比较粗糙。 increment 选项将1以下的值舍入为1，所以它没有作用。

Previous 上一篇本节目录 Next 下一篇

23-讨论

11.5.3 讨论

Google地图整合

11.5.3　讨论