在jQuery滑块上添加刻度线? [重复]
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在jQuery滑块上添加刻度线? [重复]相关的知识,希望对你有一定的参考价值。
这个问题在这里已有答案:
如何在jQuery滑块上添加刻度线?假设我有1到10的值,我怎么能在每个值上添加勾号?
我在S.O.上看过类似的帖子。但他们都建议使用插件,我想通过与其他元素进行大量交互来对其进行硬编码。
谢谢!
答案
Similar to this SO Question。 Mortimer的答案可能有所帮助。
虽然还没有正式的方法,但是在jQuery UI滑块中加入它会很不错。
另一答案
谢谢Code-Toad。我修改了你的代码以使用百分比而不是像素,所以现在它不受窗口调整大小的影响:
使用javascript:
function setSliderTicks(){
var $slider = $('#slider');
var max = $slider.slider("option", "max");
var spacing = 100 / (max -1);
$slider.find('.ui-slider-tick-mark').remove();
for (var i = 0; i < max ; i++) {
$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + '%').appendTo($slider);
}
}
CSS:
.ui-slider-tick-mark{
display:inline-block;
width:2px;
background:black;
height:16px;
position:absolute;
top:-4px;
}
另一答案
感谢Arie Livshin和CodeToad。前面的代码假设最小值始终为1.我编辑了代码以使用最小值。
$("#users-slider").slider(
{
range: "min",
value: 3,
min: 3,
max: 6,
create: function( event, ui ) {
setSliderTicks(event.target);
},
}
);
function setSliderTicks(el) {
var $slider = $(el);
var max = $slider.slider("option", "max");
var min = $slider.slider("option", "min");
var spacing = 100 / (max - min);
$slider.find('.ui-slider-tick-mark').remove();
for (var i = 0; i < max-min ; i++) {
$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + '%').appendTo($slider);
}
}
另一答案
假设滑块间隔= 1,这是一个简单的解决方案。
function setSliderTicks(){
var $slider = $('#slider');
var max = $slider.slider("option", "max");
var spacing = $slider.width() / (max -1);
$slider.find('.ui-slider-tick-mark').remove();
for (var i = 0; i < max ; i++) {
$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + 'px').appendTo($slider);
}
}
.ui-slider-tick-mark{
display:inline-block;
width:2px;
background:black;
height:16px;
position:absolute;
top:-4px;
}
另一答案
您可以使用在正确位置具有标记的背景图像 - 这可能是最简单的方法。
以上是关于在jQuery滑块上添加刻度线? [重复]的主要内容,如果未能解决你的问题,请参考以下文章
如何在 WPF C# 中更改滑块上刻度的设计(刻度的厚度、刻度的形状等)
在 iOS 滑块上,我可以单击刻度上的任意位置还是必须拖动滑块旋钮?