0
私は単純な計算機能で動作するようにJQueryスライダを取得しようとしています。JQueryスライダは簡単な計算機能で動作できますか？
私は、入力テキストボックスでの作業スライダーを持っており、それは、ユーザが選択した値を示しています。
Iはまた、ユーザが入力テキストボックスに値を入力し、計算ボタンをクリックしたときに行われている簡単な計算の別の例を有します。
ユーザーがスライドバーをドラッグすると、スライドバーから値を表示するだけでなく、その値を電卓ボックスに表示します（理想的にはユーザーはボタンをクリックしたときではなく、バーをドラッグします）。
私はこれを行う方法がわかりません。誰もがどんなアイデアを持っていますか？
これが示すテキスト値ボックススライダーである：計算
<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>Tハンクス。