博客

jQuery UI Spinner旋转事件

  • Post category:jquery

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

jQuery UI Spinner 旋转事件

Spinner 控件支持多个事件，其中包括旋转事件。旋转事件用户旋转 Spinner 控件时触发。

语法

$(selector).on("spin", function(event, ui){
  // 处理事件});

示例一：使用 spin 事件处理 Spinner 控件的值

<label for="spinner">选择一个数字：</label>
<input id="spinner" name="value">

<div id="result"></div>

<script>
$( "#spinner" ).spinner({
  min: 0,
  max: 100,
  step: 10
});

$( "#spinner" ).on( "spin", function( event, ui ) {
  var value = $( "#spinner" ).spinner( "value" );
  $( "#result" ).text( "当前值为：" + value );
});
</script>

这将创建一个 Spinner 控件，并在页面上添加一个结果区域。当用户旋转 Spinner 控件时，将触发 spin 事件，并将控件的值显示在结果区域中。

示例二：使用 spinstop 事件处理 Spinner 控件的值

<label for="spinner">选择一个数字：</label>
<input id="spinner" name="value">

<div id="result"></div>

<script>
$( "#spinner" ).spinner({
  min: 0,
  max: 100,
  step: 10
});

$( "#spinner" ).on( "spinstop", function( event, ui ) {
  var value = $( "#spinner" ).spinner( "value" );
  $( "#result" ).text( "当前值为：" + value );
});
</script>

这将创建一个 Spinner 控件，并在页面上添加一个结果区域。当用户旋转 Spinner 控件并停止时，将触发 spinstop 事件，并将控件的值显示在结果区域中。

总结：

Spinner 控件支持多个事件，其中包括旋转事件。可以使用 spin 或 spinstop 事件处理 Spinner 控件的值。使用这些事件可以方便地控制 Spinner 控的值。

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

Tags: