jQuery UI Spinner 创建事件(1)

📌 相关文章

📜 jQuery UI Spinner 创建事件(1)

📅 最后修改于: 2023-12-03 14:43:12.341000 🧑 作者: Mango

jQuery UI Spinner 创建事件

jQuery UI Spinner是一个用户输入数字或者数字范围的交互式控件。它可以帮助程序员简单高效的开发出满足用户需求的控件。在使用Spinner时，开发人员可以添加自定义事件对其进行扩展。

创建一个Spinner

首先，我们需要在代码中引入jQuery和jQuery UI库：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

接着，我们可以创建一个Spinner的示例：

<input id="spinner" />

最后，我们使用以下代码初始化Spinner：

$("#spinner").spinner();

添加事件

Spinner有三个事件需要开发人员支持：

spin: Spinner值发生变化时的事件
start: 开始生成Spinner的事件
stop: 结束生成Spinner的事件

以下是添加spin事件的例子：

$("#spinner").on("spin", function(event, ui){
  console.log("值变化：" + ui.value);
});

在以上代码中，我们使用了on函数来监听了Spinner的spin事件，并且输出了当前Spinner的值变化。

示例

为了更完整的演示我们可以给出以下完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery UI Spinner</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
  <input id="spinner" />

  <script>
    $(function() {
      $("#spinner").spinner();

      $("#spinner").on("spin", function(event, ui){
        console.log("值变化：" + ui.value);
      });
    });
  </script>

</body>
</html>

以上是使用Spinner创建事件的详细介绍。