El control de un Processing.js Bosquejo w / un control deslizante jQuery
-
08-10-2019 - |
Pregunta
He tenido un poco de suerte el control Processing.js bocetos utilizando elementos de formulario HTML y le gustaría utilizar un control deslizante jQuery para hacer lo mismo.
<script>
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
</script>
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
</p>
<div id="slider-range-min"></div>
Creo que mi principal problema es que no entiendo por completo la función de control deslizante, cómo hacer referencia a su valor dentro del boceto, o cómo hacer referencia al window.processing.Data = {}; variable dentro de la barra deslizante.
Cualquier y toda ayuda es apreciada.
Solución
Nunca he usado deslizador de jQuery-UI antes, así que no estoy seguro de si su uso correcto de ellos. Pero usted puede fácilmente comunicarse entre el procesamiento de código y el código JavaScript mediante la colocación de una variable en el objeto ventana:
1) window.communicate = {}
2) variables de almacenar en ese objeto: window.communicate.myVar
3) alterar las variables en javascript:
// inside jquery-ui callback
window.communicate.myVar = ui.value;
4) leer las variables en el procesamiento
He creado aa demostración para usted en jsFiddle: http://jsfiddle.net/Zevan/Rms2N/ 2 /
Actualizar
Así que en su función de diapositiva que se puede establecer una variable en el objeto comunicar:
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
window.communicate.value = ui.value;
}
A continuación, puede utilizar "window.communicate.value" cualquier parte del código Processing.js.
Otros consejos
Esta es una demostración de trabajo si ayuda:
http://matrix.senecac.on.ca /~asalga/FSOSS2010/jQueryUI/jquery-test.html