博客

jQuery UI Spinner停止事件

  • Post category:jquery

以下是关于 jQuery UI Spinner 停止事件的详细攻略：

jQuery UI Spinner 停止事件

spinnerstop 事件在用户停止更 spinner 值时触发。您可以使用此事件来执行某些操作，例如更新页面上的其他元素或将 spinner 值发送到服务器。

语法“`javascript

$(selector).spinner({
stop: function(event, ui) {
// 在此处执行操作
}
});


### 示例一：更新页面上的其他元素

```html
<label for="spinner">选择数量：</label>
<input type="text" id="spinner">
<p>总价：$<span id="total-price">0</span></p>

<script>
$( "#spinner" ).spinner({
  min: 0,
  max: 10,
  step: 1,
  stop: function( event, ui ) {
    var = ui.value * 10; // 假设每个物品的价格为 $10
    $( "#total-price" ).text( price );
  }
});
</script>

这将创建一个 spinner，用户可以选择 0 到 10 之间的值。当用户止更改值时，将计算总价并更新页面上的元素。

示例二：将 spinner 值发送到服务器

<label for="spinner">选择数量：</label>
<input type="text" id="spinner">
<button id="submit">提交</button>

<script>
$( "#spinner" ).spinner({
  min: 0,
  max: 10,
  step: 1,
  stop: function( event, ui ) {
    var value = ui.value;
    $.ajax({
      url: "submit.php",
      data: { value: value },
      type: "POST",
      success: function( response ) {
        alert( "提交成功！" );
      }
    });
  }
});
</script>

这将创建一个 spinner，用户可以选择 0 到 10 之间的值。当用户停止更改值时，将使用 AJAX 将值发送到服务器。

总结：

spinnerstop 事件在用户停止更改 值时触发。您可以使用此事件来执行某些操作，例如更新页面上的其他元素或将 spinner 值发送到服务器。

以上是关于 jQuery UI Spinner 停止事件的详细攻略，包括语法和两个示例。

Tags: