jquery mobile slider的半圓形狀

Question

jQuery mobile中的水平滑塊的形狀可以更改爲半圓形嗎？

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

我期待在JS文件，但無能，如何接近它。我正在研究它，以便我可以在Android應用程序中使用它。

有什麼建議嗎？

Answer 1

下面是該插件的初始化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 2

我認爲邏輯是當滑塊移動時，你要把手在Y軸移動它移動在x時軸。假設該區域是一個正方形，並且您有半圓形背景圖像作爲軌道。您可以應用除y之外的x軸邏輯，只要區域爲正方形，計算可以保持不變。 是一個很好的開始？

Answer 3

您可以使用jQuery roundSlider插件，它也支持移動設備和觸摸設備。

這個roundslider具有類似的選項，如jQuery的移動滑塊。它支持默認，最小範圍和範圍滑塊類型。不僅圓形滑塊，還支持各種circle shapes，如四分之一，一半和餡餅圓形。

請從jsFiddle檢查您的需求演示。

截圖輸出的：

欲瞭解更多詳情，請檢查demos和documentation頁。