如何将文本添加到 jQuery 滑块控件？答案

【问题标题】：How can I add text to a jQuery slider control?如何将文本添加到 jQuery 滑块控件？
【发布时间】：2012-08-09 01:21:12
【问题描述】：

我正在使用 jQuery UI Slider 插件为我的页面制作滑块，但我想为每个滑块手柄添加不同的标签。滑块的代码是一个简单的 div：

<div class="slider"></div>

这是通过 CSS 转换为滑块的：

.ui-slider { position: relative; text-align: left; margin: 1.5em auto 1.5em auto; width:10% }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.5em; height: 1.5em; cursor: default; }
.ui-slider .ui-slider-range { text-align:center; position: absolute; z-index: 1; font-size: .7em; display: block; border: 10; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.77em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

然后，通过脚本添加类。我尝试将文本放在 div 标签之间，但这不起作用：

<div class="slider">Testing</div>

如何获取滑块手柄顶部的文本，并允许文本随其移动？

编辑：我得到了滑块手柄顶部的文字，但滑块移动时它不会移动。

CSS：

.label {
    z-index:999;
    position:relative;  
}

HTML：

<div class="slider"><div class="label">Testing</div></div>

结果：

编辑 2：这是Fiddle。

【问题讨论】：

已添加！应该有点帮助。
所以你想让标题随着滑块移动？

标签： jquery css jquery-ui-slider

【解决方案1】：

试试

$('.slider .ui-slider-handle').text('Hello').css({width:70,'text-align': 'center'});

就在$( ".slider" ).slider( {step: 1}, {min:-1}, {max:1}, {value:0} );之后

jsfiddle

【讨论】：

如果我有一堆滑块并且想在每个滑块上放置不同的标签，这会起作用吗？所有这些都只是
如果你为每个人添加一个特定的 id 然后$('#someid.slider .ui-slider-handle').text(... 为<div id="someid" class="slider"></div>
我无法将手柄置于滑块的中心。它应该从中心向左或向右滑动。正如我现在所拥有的，我正在使用左边距。但这不适用于较大的句柄（带有更多文本）。边距：自动自动；也没有用。想法？
检查更新的 jsfiddle jsfiddle.net/unloco/4KEdM/3 将 margin-left 添加到 .ui-slider-handle 的一半宽度并更改了 .ui-slider 的宽度
简单的规则是为“更大”的文本制作更大的 .ui-slider，并将 margin-left 的宽度设为 .ui-slider-handle 的一半。这样它总是居中

【解决方案2】：

你可以简单地使用 jQuery 来做到这一点：

CSS

.ui-slider-handle { font-size:smaller;文字装饰：无；}

jQuery

$(".ui-slider-handle").text("Testing").width(50);

【讨论】：

【解决方案3】：

您可以移动任何/所有子元素，而不仅仅是移动文本。如果您想拖动较大的项目（例如按钮或图像），这将派上用场。

DEMO

我相信你能想出更简洁的代码；但这只是抓取所有子元素并将它们向下移动到新锚点中。

var slider = $( ".slider" ).slider( {step: 1}, {min:-1}, {max:1}, {value:0} );

slider.each(function(){
    var this$ = $(this);
    var children = this$.children().filter(':not(.ui-slider-handle)');
    this$.find('.ui-slider-handle').append(children);
});

【讨论】：