jquery - jqueryモバイルスライダーの半円形

Question

jQueryモバイルの水平スライダーの形状を半円形に変更できますか?

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

ロジックは、スライダーが動くとき、ハンドルが x 軸上を移動するときに y 軸上を移動することだと思います。領域が正方形で、トラックとして半円の背景画像があると仮定します。y 以外の x 軸からロジックを適用できます。面積が正方形である限り、計算は同じままです。それは始めに良いですか？