Wydawało by się proste to zadanie ale kombinuje na wiele sposobów i nic. Mam oto taki kod:
CODE
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Kalkulator kredytowy z suwakiem v0.1</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.slider.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.7.2.custom.css"/>
<style type="text/css">
#credit, #installmentnumer { margin: 10px; }
#installment, #creditamount, #installmentnumerval { font-weight: bold; }
input { border:0; color:#f6931f; }
</style>
<script type="text/javascript">
$(function() {
var posMonth = 0, posCredit = 0;
var tabData = new Array(
[101,202,303,506,1012,"opcja niedostępna"],
[54,109,164,274,548,823],
[39,79,118,197, 395,593],
[32,64,96,160,320,480],
[27,55,82, 137,275,413],
[24,49,73,123,246,369],
[22,45,67,113,226,339],
[21,42,63,105,211,317]);
var tabRow=tabData.length-1;
var tabCol=tabData[0].length-1;
var valMonth = [12,24,36,48,60,72,84,96];
var valCredit = [1000,2000,3000,4000,5000,10000];
$("#credit").slider({
value: 0,
min: 0,
max: tabCol,
step: 1,
slide: function(event, ui) {
$("#creditamount").val(valCredit[ui.value]);
$("#installment").val(tabData[$("#installmentnumer").slider("value")][ui.value]);
}
});
$("#installmentnumer").slider({
value: 0,
min: 0,
max: tabRow,
step: 1,
slide: function(event, ui) {
$("#installmentnumerval").val(valMonth[ui.value]);
$("#installment").val(tabData[ui.value][$("#credit").slider("value")]);
}
});
$("#creditamount").val(valCredit[$("#credit").slider("value")]);
$("#installmentnumerval").val(valMonth[$("#installmentnumer").slider("value")]);
$("#installment").val(tabData[$("#installmentnumer").slider("value")][$("#credit").slider("value")]);
});
</script>
</head>
<body>
<div>Rata w zł: <input type="text" id="installment" /></div>
<div>Wielkość kredytu w tys. zł: <input type="text" id="creditamount" /></div>
<div id="credit" style="width: 200px;"></div>
<div>Ilość rat: <input type="text" id="installmentnumerval" /></div>
<div id="installmentnumer" style="width: 200px;"></div><br />
</body>
</html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Kalkulator kredytowy z suwakiem v0.1</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.slider.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.7.2.custom.css"/>
<style type="text/css">
#credit, #installmentnumer { margin: 10px; }
#installment, #creditamount, #installmentnumerval { font-weight: bold; }
input { border:0; color:#f6931f; }
</style>
<script type="text/javascript">
$(function() {
var posMonth = 0, posCredit = 0;
var tabData = new Array(
[101,202,303,506,1012,"opcja niedostępna"],
[54,109,164,274,548,823],
[39,79,118,197, 395,593],
[32,64,96,160,320,480],
[27,55,82, 137,275,413],
[24,49,73,123,246,369],
[22,45,67,113,226,339],
[21,42,63,105,211,317]);
var tabRow=tabData.length-1;
var tabCol=tabData[0].length-1;
var valMonth = [12,24,36,48,60,72,84,96];
var valCredit = [1000,2000,3000,4000,5000,10000];
$("#credit").slider({
value: 0,
min: 0,
max: tabCol,
step: 1,
slide: function(event, ui) {
$("#creditamount").val(valCredit[ui.value]);
$("#installment").val(tabData[$("#installmentnumer").slider("value")][ui.value]);
}
});
$("#installmentnumer").slider({
value: 0,
min: 0,
max: tabRow,
step: 1,
slide: function(event, ui) {
$("#installmentnumerval").val(valMonth[ui.value]);
$("#installment").val(tabData[ui.value][$("#credit").slider("value")]);
}
});
$("#creditamount").val(valCredit[$("#credit").slider("value")]);
$("#installmentnumerval").val(valMonth[$("#installmentnumer").slider("value")]);
$("#installment").val(tabData[$("#installmentnumer").slider("value")][$("#credit").slider("value")]);
});
</script>
</head>
<body>
<div>Rata w zł: <input type="text" id="installment" /></div>
<div>Wielkość kredytu w tys. zł: <input type="text" id="creditamount" /></div>
<div id="credit" style="width: 200px;"></div>
<div>Ilość rat: <input type="text" id="installmentnumerval" /></div>
<div id="installmentnumer" style="width: 200px;"></div><br />
</body>
</html>
Suwaki chodzą ok ale denerwuje mnie to że zamiast suwać się skaczą!
Jak to zlikwidować?
Dzięki za pomoc
Pozdr.
