Question

我不确定这是什么，所以我无法搜索它，但是如果你转到http://vps.net/product/cloud-servers/并向下滚动到VPS节点，这是如何创建的？是否有任何教程或任何我可以看一看的内容？这是什么样的滑块？

谢谢！

Answer 1

他们正在使用jQuery-UI滑块，其自定义回调突出显示小节点框：

$('#slider').slider({
    range: "max",
    min: 1,
    max: 15,
    step: 1,
    slide: function(event, ui) {
        // Un-highlight nodes
        $('.node').removeClass('highlight');
        // Highlight all nodes up to value selected
        $('.node:lt('+ui.value+')').addClass("highlight");
    }
});

这是我的示例代码，我不想解析他们的混淆代码，看看他们为回调实际做了些什么。它可能与此非常相似。

演示：http://jsfiddle.net/jtbowden/A8ccw/1/

如果您将step值更改为小数值（例如.01），然后使用Math.floor()确定突出显示索引，则可以摆脱步骤行为。

演示：http://jsfiddle.net/jtbowden/A8ccw/4/

这是一个更新多个数据字段的演示：

演示：http://jsfiddle.net/jtbowden/A8ccw/8/

Answer 2

您可以使用jquery ui滑块执行此操作：http://jqueryui.com/demos/slider/

Answer 3

另请查看http://egorkhmelev.github.com/jslider/

创建这样的滑块？

3 个答案: