在选择字段中实现向上箭头的最佳做法 [英] Best practise to realize up down arrows in select field

问题描述

在这样的网页中的选择元素中设置上下箭头滑块/选择器的最佳方法是什么:

What is the best way to setup a percentage arrow up/down slider/selector in a select element in a web page like this:

1. 具有专用背景的选择列表.如果是，那么如何检测到用户单击了向上或向下箭头?
2. 为每个百分比向上/向下项目构建一个三行一列的表，其中:a)第1行=向上箭头，b)第2行=选择选项列表，c)第3行=向下箭头
3. 其他解决方案?

备注:百分比可以以5％为单位递增/递减

Remark: the percentages can be increased/decreased in steps of 5 %

推荐答案

您可以使用<input type="number">元素，<label>元素，css :before，:after，input事件来处理单击input type="number"元素，用于处理对label元素的点击的自定义事件.

You can use <input type="number"> element, <label> elements, css :before, :after, input event to handle click on input type="number" element, custom event to handle clicks on label elements.

$("label[for]").on("click", function(event) {
  $("#input").val(function(_, n) {
    return event.target.htmlFor === "up" 
           ? +n < +this.max ? +n + 5 : n 
           : +n > +this.min ? +n - 5 : n;
  }).trigger("arrow")
});

$("#input").on("input arrow", function(event) {
  if (event.isTrigger) {
    console.log("arrow");
  } else {
    console.log("input")
  }
  console.log(this.value + "%")
});

@charset "UTF-8";
 div {
  position: relative;
  top: 50px;
}
input[type="number"] {
  width: 45px;
  outline: thin solid navy;
}
label[for="up"]:nth-of-type(1):before {
  content: "\25B2";
  top: -20px !important;
  left: 32.5px;
  position: relative;
}
label[for="down"]:before {
  content: "\25BC";
  position: relative;
  top: 20px !important;
  left: -32.5px;
}
label[for="down"]:after {
  content: "%";
  position: relative;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  left: -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="select1">
    <option value="abc">abc</option>
  </select>
  <label for="up"></label><input id="input" type="number" min="0" max="100" step="5" value="0"><label for="down"></label>
</div>
<script>
</script>

这篇关于在选择字段中实现向上箭头的最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！