Complemento de perilla de marcación amigable para dispositivos móviles en Vanilla JS-JogDial. js

Vista prévia

Descripción

El plugin de JavaScript JogDial. js le ayuda a crear un control de perilla personalizable, amigable con el móvil, donde los usuarios pueden ajustar los valores mediante el arrastre cíclico con el ratón o los dedos.

Funcionamiento

Descargue y cargue los archivos del plugin JogDial en el documento.

<script src="jogDial.js"></script>

Cree un contenedor para colocar el mando.

<div id="example"></div>

Inicialice el JogDial.

var dial = JogDial(document.getElementById('example')

El ejemplo CSS para el estilo del control de perilla.

#example {

width: 200px;

height: 200px;

background: url('bg.png');

background-repeat: none;
}

#knob {

background: url('knob.png');
}

Personalice el control de la perilla con los siguientes parámetros:

var dial = JogDial(document.getElementById('jog_dial_example'),{


debug : false,


touchMode : 'knob',
// knob | wheel


 knobSize : '30%',


wheelSize : '100%',


zIndex : 9999,


degreeStartAt : 0,


minDegree : null,
// (null) infinity


maxDegree : null
 // (null) infinity
}

Event handlers.

addEventListener("mousemove", function(evt){

// on move

// event.target.rotation
});

addEventListener("mousedown", function(evt){

// on move

// event.target.rotation
});

addEventListener("mouseup", function(evt){

// on move

// event.target.rotation
});

Cambie el grado manualmente.

dial.angle(90);