0
我想獲得一個JQuery滑塊來使用簡單的計算函數。JQuery滑塊可以使用簡單的計算函數嗎？
我有滑塊使用輸入文本框，它顯示用戶選擇的值。
我還有另一個簡單計算的例子，當用戶在輸入文本框中輸入一個值並點擊一個計算按鈕。
我想要發生的事情是 - 當用戶拖動滑動條時 - 不僅顯示來自滑動條（它當前所做的）的值，而且將該值帶入計算器框中（並且理想地在用戶拖動欄，而不是當他們點擊按鈕時）。
我不知道如何做到這一點。任何人有任何想法嗎？
這與文本框的值所示的滑塊：
<html lang="us">
<head>
\t <title>jQuery Example slider2</title>
\t
\t <!--uses these local .js and css files for the main slider-->
\t <link href="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.css" rel="stylesheet">
\t <script src="http://www.sypensions.org.uk/webcomponents/test/calc/external/jquery/jquery.js"></script>
\t <script src="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.js"></script>
\t </head>
<body>
Slider
<div id="slider"></div>
<!--result box-->
<input id="slidervalue" type="text"> (min: 100, max: 5000)<br />
<!--main slider function-->
<script type="text/javascript">
$(function() {
$("#slider").slider({
min: 100, max: 5000, step: 50, value: 100,
slide: function(event, ui) {
$("#slidervalue").val(ui.value);
}
});
var initialValue = $("#slider").slider("option", "value");
$("#slidervalue").val(initialValue);
$("#slidervalue").change(function() {
var oldVal = $("#slider").slider("option", "value");
var newVal = $(this).val();
if (isNaN(newVal) || newVal < 10 || newVal > 100) {
$("#slidervalue").val(oldVal);
} else {
$("#slider").slider("option", "value", newVal);
}
});
});
</script>
</body>
</html>計算的實例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function doMath() {
//variable = value (declare all variables)
var userInput = eval(document.myform.userInput.value)
var testLump = eval(document.myform.testLump.value)
//output box = variable
var testLump_ans = testLump;
//put maths calcs here
if (userInput>10) {
\t testLump = (userInput*10)/5 ;
\t }
\t else {
\t testLump = (userInput*2)/5 ;
\t }
//round off calc to 2 dec places
document.myform.testLump.value=custRound(testLump,2);
document.myform.userInput.value=custRound(userInput,2);
}
//round off function
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<table>
<tr>
<td>User Input</td>
<td><input type="text" name="userInput" size="10" value="0" style="text-align:right "> </td>
\t </tr>
\t <tr>
\t \t <td>testLump
\t \t <div align="right"></div></td>
\t \t <td>
\t \t <input type="text" name="testLump" size="10" value="0" style="text-align:right "> <br />
\t \t </td>
\t </tr>
\t
\t <tr>
\t <td>
\t <input name="reset" type="reset" value="Reset" >
<input type="button" value="Calculate" onClick="doMath()">
</td>
\t </tr>
</table>
</FORM>Ť漢克斯。