Question

使用HTML＆amp;的JavaScript

我创建了一个幻灯片栏，使用select选项成功响应两种方式。但是我选择“隐藏”选择选项框。我想知道是否有人可以给我任何关于为滑块创建标签的提示，因为用户现在不知道他们在选择什么。我发现的示例显示完美指标，里程碑数字和浮动数字，当悬停在所有一切是滑动条相关而不是标签。救命啊！

我的JavaScript滑块条形码

        $(function() {
            var select = $( "#logbytes");
            var slider = $( " <div id='slider'></div>").insertAfter(select).slider({
                min: 1,
                max: 6,
                step: 1,
                value: select[0].selectedIndex + 1, 
                slide: function(event, ui) {
                    select[0].selectedIndex = ui.value - 1;
                }
            });

            $('#logbytes').after(slider).hide();
        });

Answer 1

基本思路是将滑块包装在包装器div中。然后在包装器中添加另一个div。它的文本将是滑块的当前值。

然后唯一要做的就是移动那个div并更新它的文本。它类似于：

slide: function(event, ui) {
    $( ".amount" ).text( ui.value );
    $( ".amount" ).css("margin-left",(ui.value-min)/(max-min)*100+"%");
}

其中min和max是滑块的最小值和最大值。

有关示例，请参阅http://jsfiddle.net/WYdLF/。

为ui滑块栏显示指标和里程碑标签

1 个答案: