jquery ui slider
- Questo topic ha 9 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 11 anni, 10 mesi fa da jqueryitalia.
- AutorePost
- 31 Maggio 2012 alle 07:24 #1709kjmario78Partecipante
Ciao a tutti
sono alle prime armi con jquery e sto cercando di implementare una semplice calcolatrice con jquery ui slider ma non riesco a farla partire.Di seguito il codice:$(function() {$( “#slider” ).slider({value:10,min: 10,max: 1000,step: 5,slide: function( event, ui ) {$( “#amount” ).val( “$” + ui.value );}});function calcola() {var amount = $( “#slider” ).val( “ui.value” );var interest = 0.5;var time = 7;var rate = amount * (interest * Math.pow(1+interest,time)) / (Math.pow(1+interest,time)-1);$( “#earning” ).text(rate.toFixed(2));}});31 Maggio 2012 alle 07:41 #2066jqueryitaliaAmministratoreCiao kjmario78.
Prova ad utilizzare $(document).ready(function() { al posto di $(function() {COsì a me la slider parte31 Maggio 2012 alle 07:49 #2067kjmario78PartecipanteCiao
a me funge la slider ma non la funzione calcola (earning)posto tutto il codeCode:<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″><title>jQuery cal</title><link type=”text/css” href=”css/excite-bike/jquery-ui-1.8.20.custom.css” rel=”stylesheet”><script type=”text/javascript” src=”js/jquery-1.7.2.min.js”> </script><script type=”text/javascript” src=”js/jquery-ui-1.8.20.custom.min.js”> </script><style></style><script>$(document).ready(function() {$( “#slider” ).slider({value:10,min: 10,max: 1000,step: 5,slide: function( event, ui ) {$( “#amount” ).val( “$” + ui.value );}});function calcolamontante() {var amount = $( “#slider” ).val( “ui.value” );var interest = 0.5;var time = 7;var rate = amount * (interest * Math.pow(1+interest,time)) / (Math.pow(1+interest,time)-1);$( “#earning” ).text(rate.toFixed(2));}});</script><label for=”amount”>Amount ($10 min): </label><input type=”text” size=”5″ id=”amount” <=”” div=””>style=”border:0; color:#3576f6; font-size: 29px; font-weight:bold; background-color:transparent;” readonly=”readonly”/>Time:7 days<label for=”earning”>Earnig:</label><input type=”text” id=”earning” style=”border:0; color:#3576f6; font-size: 29px; font-weight:bold;”>31 Maggio 2012 alle 07:58 #2068jqueryitaliaAmministratoreLa vedo dura che funzioni il calcolo se la funzione non viene mai richiamata.
Questo il codice corretto:$(document).ready(function() {$( “#slider” ).slider({value:10,min: 10,max: 1000,step: 5,slide: function( event, ui ) {$( “#amount” ).val(‘$ ‘ + ui.value );var amount = ui.value;var interest = 0.5;var time = 7;var rate = amount * (interest * Math.pow(1+interest,time)) / (Math.pow(1+interest,time)-1);$( “#earning” ).val(‘$ ‘ + rate.toFixed(2));}});});Ciao!!!31 Maggio 2012 alle 08:03 #2069kjmario78PartecipanteEcco ora si che funziona
Sei un grande.Grazie31 Maggio 2012 alle 08:21 #2070jqueryitaliaAmministratoreBuon lavoro
2 Giugno 2012 alle 09:38 #2071kjmario78PartecipanteVolevo sapere perchè quando richiamo la pagina non vengono visualizzati i valori.. ma solo dopo aver spostato il cursore della slider.Il cursore è impostato correttamente “value:10,”
La pagina viene generata da smartyGrazie ancora9 Giugno 2012 alle 09:23 #2072jqueryitaliaAmministratoreCon le istruzioni dopo rate, crea la funzione calcola e setta rate:calcola().
Dopodiche lancia la funzione dentro il document(ready)
9 Giugno 2012 alle 14:43 #2073kjmario78PartecipanteEhm
function calcola (){rate:calcola();}[code]e poi:calcola(); in document ready ma non è cambiato nulla 🙁[code]function calcola (){
rate:calcola();}e poi:calcola(); in document ready ma non è cambiato nulla 🙁[code]
e poi:calcola(); in document ready ma non è cambiato nulla12 Giugno 2012 alle 07:19 #2074jqueryitaliaAmministratoreUhmmmm, forse mi sono spiegato male.
Ecco la funzione:
$(document).ready(function() {
$( “#slider” ).slider({
value:10,
min: 10,
max: 1000,
range: ‘min’,
step: 5,
slide: function( event, ui ) {
calcola(ui.value);
}
});
function calcola( myval ) {
$( “#amount” ).val(‘€ ‘ + myval );
var amount = myval;
var interest = 0.5;
var time = 7;
var rate = amount * (interest * Math.pow(1+interest,time)) / (Math.pow(1+interest,time)-1);
$( “#earning” ).val(‘€ ‘ + rate.toFixed(2));
};
calcola(10);
});
Trovi l’esempio funzionante qui: https://www.jqueryitalia.org/tutorial/slider.html - AutorePost
- Devi essere connesso per rispondere a questo topic.