引导 5 个微调器颜色 (1)

📌 相关文章

📜 引导 5 个微调器颜色 (1)

📅 最后修改于: 2023-12-03 15:39:30.677000 🧑 作者: Mango

引导 5 个微调器颜色

在Web开发中，微调器常常用于改变数值型输入框的值。其中有一种常见的微调器是通过指定不同颜色来区分不同的附加样式。下面我们将介绍如何使用jQuery UI库来创建5个不同颜色的微调器。

步骤

首先要确保你已经引用了jQuery和jQuery UI库。你可以在HTML文档的head部分中添加以下代码：

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">
</head>

创建5个不同颜色的class。你可以在CSS文件中添加以下代码：

.ui-micro-red .ui-widget-content{background:red;border-color:red}
.ui-micro-green .ui-widget-content{background:green;border-color:green}
.ui-micro-blue .ui-widget-content{background:blue;border-color:blue}
.ui-micro-yellow .ui-widget-content{background:yellow;border-color:yellow}
.ui-micro-orange .ui-widget-content{background:orange;border-color:orange}

初始化微调器。你可以在JavaScript文件中添加以下代码：

$(function() {
  $(".ui-micro").spinner({
    min: 0,
    max: 100,
    step: 1,
    create: function(event, ui) {
      $(this).addClass("ui-micro-red");
    }
  });
  $(".ui-micro-green").spinner({
    create: function(event, ui) {
      $(this).addClass("ui-micro-green");
    }
  });
   $(".ui-micro-blue").spinner({
    create: function(event, ui) {
      $(this).addClass("ui-micro-blue");
    }
  });
   $(".ui-micro-yellow").spinner({
    create: function(event, ui) {
      $(this).addClass("ui-micro-yellow");
    }
  });
   $(".ui-micro-orange").spinner({
    create: function(event, ui) {
      $(this).addClass("ui-micro-orange");
    }
  });
});

在HTML中创建5个不同颜色的微调器。你可以添加以下代码：

<input type="text" class="ui-micro ui-micro-red">
<input type="text" class="ui-micro ui-micro-green">
<input type="text" class="ui-micro ui-micro-blue">
<input type="text" class="ui-micro ui-micro-yellow">
<input type="text" class="ui-micro ui-micro-orange">

效果

完成后，你会得到一个包含5个不同颜色的微调器的页面。用户可以使用它们来增加或减少数值输入框中的数值。你的应用程序现在具有更直观的UI，让你的用户轻松找到需要的功能。