1

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

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

我正在查看 js 文件，但不知道如何处理它。我正在研究它，以便可以在 Android 应用程序中使用它。

请问有什么建议吗？

4

3 回答 3

1

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

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

请从 中查看您的需求演示jsFiddle。

输出截图：

jquery 圆形滑块 - 不同的圆形

有关更多详细信息，请查看演示和文档页面。

于 2015-07-12T20:12:38.060 回答
0

这是该小部件的初始化 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/

于 2012-05-09T16:35:32.640 回答
0

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

于 2012-05-09T16:47:35.457 回答