Forme semi-circulaire du curseur mobile jquery

Question

La forme du curseur horizontal de jQuery mobile peut-elle être modifiée en semi-circulaire?

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

Je cherche dans le fichier js, mais désemparés quant à la façon de l'aborder. Je suis à la recherche pour que je puisse l'utiliser dans une application Android.

Des suggestions s'il vous plaît?

Answer 1

Voici le code HTML initialisées pour de ce widget:

<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> 

Comme vous pouvez le voir est juste un élément DIV. Vous pouvez donc affecter une image de fond différente à la DIV pour afficher une piste circulaire, mais il sera beaucoup plus difficile d'obtenir un mouvement circulaire du curseur.

Voici votre départ:

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)) + '%'; 
    } 
});​ 

Et une démo: http://jsfiddle.net/yRrYL/1/

Answer 2

Je pense que la logique est quand le curseur se déplace, vous voulez que la poignée de se déplacer sur l'axe y quand il se déplace sur le x axe. en supposant que la zone est un carré et que vous avez l'image de fond en demi-cercle comme la piste. vous pouvez appliquer la logique de l'axe des abscisses à l'exception du y, le calcul peut rester le même tant que la zone est un carré. est-ce bon pour un début?

Answer 3

Vous pouvez utiliser le plugin jQuery roundSlider, il prend également en charge les appareils mobiles et les appareils tactiles.

Ce curseur rotatif possède des options similaires à celles du curseur mobile jQuery. Il supporte les types de curseur par défaut, min-range et range. Non seulement le curseur rond prend en charge divers circle shapes tels que les formes de cercle quart, moitié et tarte.

Veuillez vérifier la démo de votre exigence de jsFiddle.

Capture d'écran de la sortie:

Pour plus de détails s'il vous plaît vérifier la page demos et documentation.