在UISlider下添加数字 [英] Add Numbers under UISlider
问题描述
我有一个用JQuery UI实现的UISlider.我想在显示数字的滑块下添加图例.我遵循了此答案，其中显示了如何实现此目的，然后将数字和百分比值放在一起.这样，当滑块的大小发生变化(例如，调整浏览器的大小)时，数字仍位于正确的位置.
这很好并且很好，但是如果浏览器窗口很小，或者滑块的编号很多，则图例编号彼此之间的距离就太近了.
问题:
如果数字太接近'x'，我该怎么删除.
这是我尝试做的事情:
if (i !== 0) {
var prevLegendNum_offsetLeft = $('#legendNum' + i).closest('.sliderLegend').find('.sliderLegendNum').offset().left
var distance = $('#legendNum' + i).offset().left - prevLegendNum_offsetLeft;
console.log(distance); // Logs: 0
if (distance <= 35) {
$('#legendNum' + i).remove();
}
}
之所以我必须使用prevLegendNum_offsetLeft而不是仅仅使用$('#legendNum' + (i - 1))来完成整个操作，是因为，如果有3个数字彼此之间的距离小于35，则2个数字要后面i将被删除.然后它将尝试访问$('#legendNum' + (i - 1)，但是该目录将不存在，因此将返回错误.
当我运行上面的代码时，它将删除除第一个数字以外的所有数字.
$("#slider").slider({
value: 4,
min: 1,
max: 15,
step: 1
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = opt.max - opt.min;
for (var i = 0; i <= vals; i++) {
var el = $('<div class="sliderLegend"><div class="sliderLegendMark">|</div><div class="sliderLegendNum" id="legendNum' + i + '">' + (i + 2) + '</div></div>').css('left', (i / vals * 100) + '%');
$('#slider').append(el);
if (i !== 0) {
var prevLegendNum_offsetLeft = $('#legendNum' + i).closest('.sliderLegend').find('.sliderLegendNum').offset().left
var distance = $('#legendNum' + i).offset().left - prevLegendNum_offsetLeft;
console.log(distance);
if (distance <= 35) {
$('#legendNum' + i).remove();
}
}
}
});
#slider > div {
position: absolute;
width: 20px;
margin-left: -10px;
text-align: center;
margin-top: 20px;
}
/* below is not necessary, just for style */
#slider {
width: 50%;
margin: 2em auto;
}
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="slider"></div>
您可以遍历所有.sliderLegend元素(第一个元素除外)，并将该元素的左位置与最近的前一个元素的右位置进行比较.
如果最接近的上一个元素的右侧大于当前元素的左侧，则说明它们重叠，并且可以删除当前正在迭代的元素.
在下面的示例中，条件为left < prevRight + 6，因此有一个6px缓冲区.只需根据您要在数字之间留出多少空间来相应地调整该数字即可.
$('#slider .sliderLegend').slice(1).each(function() {
var left = $(this).position().left,
$prev = $(this).prevAll(':has(.sliderLegendNumber)').first(),
prevRight = $prev.position().left + $prev.width(),
$item = $(this).is(':last-child') ? $prev : $(this);
if (left < prevRight + 6) {
$item.find('.sliderLegendNumber').remove();
}
});
此外，您遇到的部分问题是所有子元素div的宽度都固定为20px.因此，由于文本会溢出，因此您无法准确计算元素的左偏移位置.要解决此问题，我删除了固定宽度并添加了transform: translateX(-50%)以便使元素水平居中.
#slider > div {
position: absolute;
text-align: center;
margin-top: 20px;
transform: translateX(-50%);
}
现在1-50范围内会生成以下内容:
1-100范围内将产生以下内容:
此外，如果您也想删除这些行，请删除整个元素而不是数字:
I have a UISlider I implemented with JQuery UI. I want to add a legend under the slider showing the numbers. I followed this answer which showed how to implement that, placing then numbers with percentage values. This way when the sliders size changes, (ex. browser gets resized,) the numbers are still at the correct places.
That works fine and well, but if the browsers window is small, or if there are a lot of numbers for the slider, then the legend number get too close to each other.
Question:
How can I delete a number if they are 'x' amount too close.
Here is what I tried doing:
if (i !== 0) {
var prevLegendNum_offsetLeft = $('#legendNum' + i).closest('.sliderLegend').find('.sliderLegendNum').offset().left
var distance = $('#legendNum' + i).offset().left - prevLegendNum_offsetLeft;
console.log(distance); // Logs: 0
if (distance <= 35) {
$('#legendNum' + i).remove();
}
}
The reason why I had to do the whole thing with prevLegendNum_offsetLeft, and not just $('#legendNum' + (i - 1)) is because, if there are 3 numbers that are less than the distance of 35 away from each other, so 2 numbers behind i will be deleted. It will then try to access $('#legendNum' + (i - 1), but that won't be there, so it will return an error.
When I run the code above, it deletes all numbers besides for the first one.
$("#slider").slider({
value: 4,
min: 1,
max: 15,
step: 1
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = opt.max - opt.min;
for (var i = 0; i <= vals; i++) {
var el = $('<div class="sliderLegend"><div class="sliderLegendMark">|</div><div class="sliderLegendNum" id="legendNum' + i + '">' + (i + 2) + '</div></div>').css('left', (i / vals * 100) + '%');
$('#slider').append(el);
if (i !== 0) {
var prevLegendNum_offsetLeft = $('#legendNum' + i).closest('.sliderLegend').find('.sliderLegendNum').offset().left
var distance = $('#legendNum' + i).offset().left - prevLegendNum_offsetLeft;
console.log(distance);
if (distance <= 35) {
$('#legendNum' + i).remove();
}
}
}
});
#slider > div {
position: absolute;
width: 20px;
margin-left: -10px;
text-align: center;
margin-top: 20px;
}
/* below is not necessary, just for style */
#slider {
width: 50%;
margin: 2em auto;
}
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="slider"></div>
You could iterate over all the .sliderLegend elements (except the first one), and compare the element's left position with the closest previous element's right position.
If the right side of the closest previous element is greater than the left side of the current element, then you know that they overlap, and you can remove the element you are currently iterating over.
In the example below, the condition is left < prevRight + 6, so there is a 6px buffer. Just adjust that number accordingly to how much space you want between the numbers.
$('#slider .sliderLegend').slice(1).each(function() {
var left = $(this).position().left,
$prev = $(this).prevAll(':has(.sliderLegendNumber)').first(),
prevRight = $prev.position().left + $prev.width(),
$item = $(this).is(':last-child') ? $prev : $(this);
if (left < prevRight + 6) {
$item.find('.sliderLegendNumber').remove();
}
});
In addition, part of the problem you were encountering was that all the children div elements had a fixed width of 20px. Due to this, you couldn't accurately calculate the offset left position of the element because the text would overflow. To work around this, I removed the fixed width and added transform: translateX(-50%) in order to center the elements horizontally.
#slider > div {
position: absolute;
text-align: center;
margin-top: 20px;
transform: translateX(-50%);
}
A range of 1-50 would now generate the following:
A range of 1-100 would generate the following:
Additionally, if you would like to remove the lines as well, remove the entire element rather than just the number:
这篇关于在UISlider下添加数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
