半圆形jquery移动滑块

Question

jQuery mobile中水平滑块的形状可以改为半圆形吗？

http://jquerymobile.com/test/docs/forms/slider/

我正在查看js文件，但对如何处理它一无所知。我正在调查它，以便我可以在Android应用程序中使用它。

有什么建议吗？

Answer 1

您可以使用jQuery roundSlider插件，它也支持移动设备和触控设备。

这个滑翔机具有与jQuery移动滑块类似的选项。它支持默认，最小范围和范围滑块类型。它不仅支持圆形滑块，还支持各种circle shapes，例如四分之一，一半和饼形圆形。

请从jsFiddle查看您的要求演示。

输出屏幕截图：

有关详细信息，请查看demos和documentation页。

Answer 2

以下是该小部件的初始化HTML：

<div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
    <a href="#" class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-valuetext="33" title="33" aria-labelledby="slider-0-label" style="left: 33%; ">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text"></span>
        </span>
    </a>
</div>

正如你所看到的，它只是一个DIV元素。因此，您可以为DIV指定不同的背景图像以显示圆形轨迹，但要使滑块以圆形方式移动将会更加困难。

这是你的开始：

var mousedown = false;
$(document).delegate('.ui-slider-handle', 'mousedown mouseup mousemove', function (event) {
    if (event.type == 'mousedown') {
        mousedown = true;
    } else if (event.type == 'mouseup') {
        mousedown = false;
    } else if (mousedown) {
        var max     = 150,
            percent = (parseInt(this.style.left) / 100);
        this.style.top = (50 - (Math.sin(percent) * max)) + '%';
    }
});​

演示：http://jsfiddle.net/yRrYL/1/

Answer 3

我认为逻辑是当滑块移动时，您希望手柄在x轴上移动时在y轴上移动。假设该区域是正方形，并且您将半圆形背景图像作为轨道。您可以从x轴应用除y之外的逻辑，只要该区域是正方形，计算就可以保持不变。 这对一开始有好处吗？